1. 下载安装vue-router
npm 或者 CDN 官网皆可
2. router 基本配置
// 第一步定义路由与组件之间的映射关系
let routes = [
{
path: '/',
component: {
template: `
<div>
<h1>首页</h1>
</div>
`,
}
},
{
path: '/about',
component: {
template: `
<div>
<h1>关于我们</h1>
</div>
`,
}
},
];
// 第二步 创建 router对象 把上一步的配置传参进去
let router = new VueRouter({
routes: routes
})
// 第三步 把 router 对象放到 vue 实例中去
new Vue({
el: '#app',
router: router
})
// 第四步 使用 router-link 与 router-view 标签
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
// router-link 相当于a标签， router-view 是显示页面的容器
这样一来，点击链接就会显示对应的组件。并且地址栏会发生变化
3. 传参以及获取传参
第一种传参方式：
地址栏为：/user/小欧
先在rouer-link 中传参
<!-- 先在rouer-link 中传参 -->
<router-link to="/user/小欧">小欧</router-link>
然后在router配置里面接收参数
{
path: '/user/:name', // :name 表示参数名
component: {
template: `
<div>
<h1>我叫:{{$route.params.name}}</h1>
</div>
`,
} // $route.params.name 接收参数
}
第二种传参方式：
地址栏为：/user/小欧?age=18
{
path: '/about',
component: {
template: `
<div>
<h1>关于我们</h1>
<h1>我们：{{$route.query.age}}岁了</h1>
</div>
`,
}
}
// $route.query.age 接收参数 无需在router-link中传参 只需在 地址栏传参 ?age=18 这种格式
// 多个参数使用 & 分割
4. 子路由
在某个路由下想要再显示一层路由
{
path: '/user/:name',
component: {
template: `
<div>
<h1>我叫:{{$route.params.name}}</h1>
<router-link :to="'/user/'+ $route.params.name + '/more'">更多信息</router-link>
<router-view></router-view>
</div>
`
},
children: [
{
path: 'more',
component: {
template: `
<div>
用户{{$route.params.name}}的详细信息
大海法兰克福健康减肥l大海法兰克福健康减肥l
大海法兰克福健康减肥l大海法兰克福健康减肥l
大海法兰克福健康减肥l大海法兰克福健康减肥l
</div>
`
}
}
]
}
只需要在 对应的路由配置中增加 children 选项，跟第一层路由一样，别忘了在父级路由上面添加 router-link 与 router-view 标签
5. 手动访问和传参
添加一个按钮
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/小欧">小欧</router-link>
<button @click="surf()">点击漫游跳转</button>
new Vue({
el: '#app',
router: router,
methods: {
surf: () => {
setTimeout(() => {
router.push('/about') // 使用push方法
}, 2000)
}
}
})
两秒后跳转到 about 组件
动态的跳转传参：
{
path: '/user/:name',
name: 'user', // 当前路由的名字
component: {
template: `
<div>
<h1>我叫:{{$route.params.name}}</h1>
<router-link :to="'/user/'+ $route.params.name + '/more'">更多信息</router-link>
<router-view></router-view>
</div>
`
},
children: [
{
path: 'more',
component: {
template: `
<div>
用户{{$route.params.name}}的详细信息
大海法兰克福健康减肥l大海法兰克福健康减肥l
大海法兰克福健康减肥l大海法兰克福健康减肥l
大海法兰克福健康减肥l大海法兰克福健康减肥l
</div>
`
}
}
]
}
点击按钮执行的函数：
surf: () => {
setTimeout(() => {
router.push('/about')
setTimeout(() => {
router.push({ // 这里传入一个对象 name 为当前路由的名字
name: 'user', params: {
name: '小欧'
}
})
}, 2000)
}, 2000)
}
6. 命名视图
使用多个 router-view ，一个路由对应多个路由 视图 即一个 router-link 对应 多个 router-view
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/小欧">小欧</router-link>
<button @click="surf()">点击漫游跳转</button>
</div>
<div>
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view><!-- 首先取名 -->
</div>
{
path: '/about',
components: { // 这里是components
sidebar:{ // 对象的键名就是router-view的name值
template:`
<div>用户的页面一</div>
`
},
content:{
template:`
<div>用户的页面二</div>
`
},
}
},
7. 导航钩子
说白了就是路由的生命周期函数，在期间可以做一些验证，判断是否跳转，实现路由守卫的效果
何为路由守卫？路由守卫有点类似于ajax的请求拦截器，就是请求发送之前先给你拦截住做一些事情之后再去发送请求，同样这里的路由守卫意思差不多；简单理解为就是你在进路由之前，首先把你拦住，对你进行检查；这是不是有点中学门口的保安？进来之前拦住，有学生证就进，没有学生证就不让进；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他的钩子函数进行其他操作；
vue-router一共给我们提供了三大类钩子函数来实现路由守卫：
- 全局钩子函数（beforeEach、afterEach)
- 路由独享的钩子函数（beforeEnter）
- 组件内钩子函数（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）
这里只讲一下全局函数：
// 例子
// 进入路由前方法勾子
router.beforeEach((to, from, next) => {
console.log(to, '前置第一个参数')
console.log(from, '前置第二个参数')
console.log(next, '前置第三个参数')
/
to 目标路由
from 源路由
next 跳转到下一个路由
*/
//这里暂时用 localStorage 来简单模拟验证权限
if (window.localStorage.getItem("token")) {
// 如果存在，则直接跳转到对应路由
next();
} else {
// 如果不存在，则跳转到登录页
next('/login');
}
});
8. 理由匹配与元数据
路由匹配：
用于对当前路由地址的匹配与验证
// 全局的 导航钩子函数
router.beforeEach(function(to,from,next){
var logged_in = false
console.log('to_path',to.path)
console.log('to',to.matched) // 会打出父级与子级路由
if(!logged_in && to.matched.some(function(item){
return item.path.login_in // 只要有一个匹配就不能登录
})){
next('/login')
}else{
next()
}
})
元数据：
在路由配置项里面添加的数据标志，以便用于验证检验是否跳转等功能
{
path: '/about',
meta:{ // 元数据
login_in:false
},
components: {
sidebar:{
template:`
<div>用户的页面一</div>
`
},
content:{
template:`
<div>用户的页面二</div>
`
},
}
},
在逻辑中使用
// 全局的 导航钩子函数
router.beforeEach(function(to,from,next){
var logged_in = false
console.log('to_path',to.path)
console.log('to',to.matched) // 会打出父级与子级路由
if(!logged_in && to.matched.some(function(item){
return item.path.login_in // 使用元数据进行逻辑判断
})){
next('/login')
}else{
next()
}
})
