路由参数
普通参数
定义路由
export default [
{
path: '/day03/demo2',
component: () => import('../views/day03/demo2.vue')
}
]页面跳转，? 的方式传递参数。
<template>
<div>
<router-link to="/day03/demo1?id=1">跳转</router-link>
</div>
</template>在目标页面获取参数
this.$route.query.id路径参数
路径参数，即参数是路由的一部分，若是没有参数则路由不成立，报404错误。
定义路由
export default [
{
path: '/day03/demo3/:id',
component: () => import('../views/day03/demo3.vue'),
props: true
}
]跳转方式
<template>
<div>
<router-link to="/day03/demo3/1">跳转</router-link>
</div>
</template>第一种获取参数的方式
this.$route.params.id第二种获取参数的方式，使用这种方式获取参数，则需要定义路由的时候，配置 props 属性为 true 。
props: ['id']命名路由
顾名思义，命名路由就是给路由起一个名字，我们可以通过这个名字进行路由跳转。
定义路由
export default [
{
path: '/day03/demo3/:id',
name: 'Day03Demo3',
component: () => import('../views/day03/demo3.vue'),
props: true
}
]通过路由名称进行路由跳转及参数传递
<template>
<div>
<router-link :to="{name: 'Day03Demo3', params: {id: 1}, query: {id: 2}}">跳转</router-link>
</div>
</template>- query : 普通参数
- params : 路径参数
编程式导航
编程式导航，即通过绑定事件的方式通过全局 $router 对象，进行路由跳转。
<template>
<div>
<button @click="handleTo">跳转</button>
</div>
</template>
<script>
export default {
methods: {
handleTo () {
// 通过 name 跳转，可使用 query 和 params 传递对应类型的参数，如下：
this.$router.push({ name: 'Day03Demo3', query: { id: 1 }, params: { id: 1 } })
// 通过 path 跳转，则 params 参数需直接写入到路径中，query 参数通过 query 属性传递，如下：
this.$router.push({ path: '/day03/demo3/1', query: { id: 1 } })
}
}
}
</script>嵌套路由
使用 children 关键字在现有路由中嵌入路由。
router/index.js 内容如下：
const routes = [
{
path: '/',
name: 'Home',
component: Home,
children: [ // 嵌套路由
{
path: 'user',
name: 'User',
component: User
}
]
}
]需注意嵌套路由，子路由会继承父路由的views页面。同时父路由的views中，需要使用 router-view 标签接收子路由的views。
<template>
<div class="home">
<router-link to="/user">to User</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>子路由的views页面。
<template>
<div>
<h1>User</h1>
</div>
</template>命名视图
有时候想同时 (同级) 展示多个视图，而不是嵌套展示。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：
router
const routes = [
{
path: '/',
name: 'Home',
component: Home,
children: [
{
path: 'user',
name: 'User',
components: {
user: User,
user1: User1,
default: User2
},
props: { // 路径参数
default: true,
user: true,
user1: true
}
}
]
}
]Home 视图
<template>
<div class="home">
<router-link to="/user">to User</router-link>
<router-view name="user"></router-view>
<router-view name="user1"></router-view>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>重定向
重定向，顾名思义就是说，让我们访问一个路由的时候，程序会自动将路由跳转到其他的路由，这就是重定向了。
使用 redirect 关键字，进行路由重定向。
使用路径进行重定向
const routes = [
{
path: '/home',
redirect: '/'
}
]使用 name 重定向
const routes = [
{
path: '/home',
redirect: { name: 'Home' }
}
]函数使用 路径 的方式重定向
const routes = [
{
path: '/home',
redirect: to => {
return '/'
}
}
]函数使用 名称 的方式重定向
const routes = [
{
path: '/home',
redirect: to => {
return { name: 'Home' }
}
}
]别名
别名，就是为路由的路径重新定义一个名字，浏览器的地址栏里面显示的是路由别名，但实际上访问的是实际的路由地址。
使用 alias 关键字定义别名
const routes = [
{
path: '/',
name: 'Home',
alias: '/index', // 定义别名
component: Home
}
]“别名” 的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
路由传参的三种方式
布尔模式
const routes = [
{
path: '/index/:id',
name: 'Index',
component: Index,
props: true
}
]对象模式
const routes = [
{
path: '/index/:id',
name: 'Index',
component: Index,
props: {
id: 456
}
}
]函数模式
通过函数的方式传参
const routes = [
{
path: '/index/:id',
name: 'Index',
component: Index,
props: (route) => {
return { id: route.params.id, title: route.query.title }
}
}
]通过 ES6 将函数的方式简化
const routes = [
{
path: '/index/:id',
name: 'Index',
component: Index,
props: (route) => ({ id: route.params.id, title: route.query.title })
}
]vue-router 的两种模式
hash
在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件。
优点：
- 只需要前端配置路由表, 不需要后端的参与
- 兼容性好, 浏览器都能支持
- hash值改变不会向后端发送请求, 完全属于前端路由
缺点：
- hash值前面需要加#, 不符合url规范,也不美观
history
history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法，它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。
优点：
- 符合url地址规范, 不需要#, 使用起来比较美观
缺点
- 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误。
- 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持。