Vue Router

Why learning?

  • 可快速开发单页应用
  • vue路由 每一页的地址都是唯一的,且页面不刷新
  • 不丢失状态、不丢失数据,只需取一次数据就可以一直使用
  • 切换页面不需要重新读取数据、节省资源

配置

  1. 定义路由数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var routes = [
{
path: '/',//路由地址
component: {
template: '<div><h1>首页</h1></div>'
}
},{
path: '/about',//路由地址
component: {
template: '<div><h1>关于</h1></div>'
}
}
]

  1. 将路由数组传递给vue router的构造器VueRouter
1
2
3
var router = new VueRouter({
routes:routes;
})
  1. 将实例化的router传递给#app
1
2
3
4
new Vue({
el:'#app',
router:router,
})

简单测试

使用router-link跳转,to属性对应定义的path(路由地址)

1
2
3
<div id="app">
<router-link to="/">主页</router-link>
</div>

点击链接后生成渲染的位置使用router-view

1
<router-view></router-view>

路由的传参

在vue-router中传递参数有两种方式

1. 通过segment

通过url中的一部分

例如想让用户页面通过其用户id动态实现

1
2
<router-link to="/user/a">a</router-link>
<router-link to="/user/b">b</router-link>

通过给传参加:,并且在template中使用{{$route.params.name}}获取到参数的值

1
2
3
4
5
6
7
8
var routes = [
{
path: '/user/:name',
component: {
template: '<div><h1>我叫:{{$route.params.name}}</h1></div>'
}
}
]

2. 根据?+ 参数的方式

在url框中添加例如?age=20

1
/user/a?age=20

template中使用{{$route.query.age}}

1
2
3
4
5
6
7
8
var routes = [
{
path: '/user/:name',
component: {
template: '<div><h1>我叫:{{$route.query.age}}</h1></div>'
}
}
]

嵌套路由

想实现/user/xxx/more都可跳转到更多详情页的做法

pathcomponent的基础上增加childre属性

务必在父级路由中添加router-link链接和添加router-view渲染位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var routes = [
{
path: '/user/:name',
component: {
template: '
<div>
<h1>我叫:{{$route.params.name}}</h1>
<router-link to='⚠️'>more</router-link>
<router-view></router-view>
</div>'
},
children:[
{
path:`more`,
componte: '<div>用户:{{$route.params.name}}的详细信息</div>'
}
]
}
]

⚠️实现动态链接的两种方法

  1. 使用 v-bind to="'/user'+route.params.name+'more'"
  2. 使用 追加属性append to='more' append

手动访问和手动传参

手动访问

将事件推送到指定链接,使用router.push

1
2
3
4
5
6
7
8
new Vue({
el:'#app',
methods:{
surf:function(){
this.router.push('/about');
}
}
})

手动传参

  1. 直接写参数
    this.router.push('/user',{name:user});
  2. 使用指定路由名称,后面写参数
    this.router.push({name:'user',params:{name:'a'}});

命名视图

如果管理面板每个面板功能不同,则需要多个router-view,这个时候就需要定义name属性

1
2
3
4
<div id="app">
<router-link to="/post">文章管理</router-link>
<router-view name = "content" ></router-view>
</div>

编写对应路由

使用components而不是component

通过components:{ 定义的view名字:{template'内容'} }的方式进行对应

1
2
3
4
5
6
7
8
9
10
11
var routes = [
{
path: '/post',
components: {
content:{
template:'<h1>POST管理</h1>'
}

}
}
]

特别感谢:表严肃