- router-link 和 route-view 组件
- 路由配置
2.1. 动态路由
2.2. 嵌套路由
2.3. 命名路由
2.4. 命名视图 - 重定向和别名
- JS 操作路由
1. router-link 和 route-view 组件
router-link 组件封装了一个 a 标签，<router-link> 相当于 <a href="...">，支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
route-view 是视图渲染组件，通过 route-link 指定的路径都会在这个里面去渲染
2. 路由配置
首先，一个路由列表它是一个组件，在里面包含着路由对象。最基本的路由对象必须包含两个属性：path 和 component。path 是 url 路径，component 是想要渲染的组件。
import Home from '@/views/Home.vue'
export default [
{
path: '/',
component: Home,
},
{
path: '/about',
// lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
component: () => import('@/views/About.vue'),
}
]
2.1 动态路由
router.js 代码：
import Home from '@/views/Home.vue'
export default [
{
path: '/',
component: Home,
},
{
path: '/about',
// lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
component: () => import('@/views/About.vue'),
},
// 动态路由
{
// name 就是一个动态路由参数
path: '/arg/:name',
component: () => import('@/views/arg.vue')
},
]
arg.vue 代码：
<template>
<div>
{{ $route.params.name }}
</div>
</template>
<script>
export default {
//
}
</script>
$route：当前激活的路由信息对象，$route.params.name 表示路由中有一个 params 对象，params 对象有一个 name 属性，这里的 name 就是在 route.js 中 path 后面所定义的动态路由参数
路由对象属性
$route.path
类型: string
字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
$route.params
类型: Object
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query
类型: Object
一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
$route.hash
类型: string
当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
$route.fullPath
类型: string
完成解析后的 URL，包含查询参数和 hash 的完整路径。
$route.matched
类型: Array<RouteRecord>
一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。
$route.name
当前路由的名称，如果有的话。
$route.redirectedFrom
如果存在重定向，即为重定向来源的路由的名字。
通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。
this.$router
router 实例。
this.$route
当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，
2.2 嵌套路由
router.js：
import Home from '@/views/Home.vue'
export default [
{
path: '/',
component: Home,
},
{
path: '/about',
// lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
component: () => import('@/views/About.vue'),
},
// 嵌套路由
{
path: '/parent',
component: () => import('@/views/parent.vue'),
children: [
{
// 嵌套字节点，不添加 /
// path: '/child',
path: 'child',
component: () => import('@/views/child.vue')
}
]
},
]
parent.vue：
<template>
<div>
I am parent
<!-- 用来渲染路由视图 -->
<route-view/>
</div>
</template>
<script>
export default {
//
}
</script>
child.vue：
<template>
<div>
I am child
</div>
</template>
2.3 命名路由
router.js
import Home from '@/views/Home.vue'
export default [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
// lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
component: () => import('@/views/About.vue'),
},
]
多了一个 name 关键字，这里在组件中引用，可以使用 name 的值来引用。
<template>
<div id="app">
<div id="nav">
<route-link :to="{ name: 'home' }">Home</route-link>
<route-link :to="{ name: 'about' }">About</route-link>
</div>
<route-view/>
</div>
</template>
<script>
export default {
//
}
</script>
2.4 命名视图
<route-view>，如果我们想在同一个页面上显示多个视图，而且让每一个视图显示在指定位置的话，这个时候我们就可以使用命名视图。
router.js：
import Home from '@/views/Home.vue'
export default [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
// lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
component: () => import('@/views/About.vue'),
},
// 命名视图
{
path: '/name_view',
// 这里注意，是 components 表示加载多个组件
components: {
// 默认没有命名，加载 default
default: () => import('@/veiws/child.vue'),
email: () => import('@/views/email.vue'),
tel: () => import('@/views/tel.vue')
}
}
]
多个 <route-view> 包含多个视图：
<template>
<div id="app">
<div id="nav">
<route-link :to="{ name: 'home' }">Home</route-link>
<route-link :to="{ name: 'about' }">About</route-link>
</div>
<route-view/>
<route-view name="email"/>
<route-view name="tel"/>
</div>
</template>
email.vue：
<template>
<div>
email: [email protected]
</div>
</template>
tel.vue：
<template>
<div>
tel: 13838383838
</div>
</template>
3. 重定向和别名
重定向：将当前要访问的 url 转到另一个指定的 url
别名：给引用路径设置一个其他名称。使用 alias 关键字
router.js：
import Home from '@/views/Home.vue'
export default [
{
path: '/',
alias: '/my_home',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
// lazy-loaded 懒加载，即没有点击这个 path 不会加载该组件，起到优化作用。
component: () => import('@/views/About.vue'),
},
// 重定向
{
// 当我们访问 '/main' 时，重定向到 '/'
path: '/main',
redirect: '/',
// 也可以使用命名路由
//redirect: {
// name: 'home'
//}
}
]
4.JS 操作路由(编程式导航)
编程式导航需要获取一个路由实例，通过 this.$router 来获取。
Home.vue：
<template>
<div id="home">
<button @click="handleClick('back')">返回上一页</button>
<button @click="handleClick('push')">跳转到 parent </button>
<button @click="handleClick('replace')">替换到 parent </button>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
component: { HelloWorld },
method: {
handleClick (type) {
//this.$router.go(-1)
if (type === 'back') {
this.$router.back()
} else if (type === 'push') {
this.$router.push({
// 通过命名路由的方式
name: 'parent',
// 方法2: 动态路由参数
params：{
name: 'wayne'
}
//// 方法1：url 中带查询参数
//query: {
// name: 'wayne'
//}
})
} else if (type === 'replace') {
// 使用 replace， 它与 push 的区别是 replace 是替换，
// 它不会被记录在路由记录中
this.$router.replace({
name: 'parent'
})
}
}
}
}
</script>