【vue】vue-router的用法
依赖安装:
(c)npm install vue-router
过程:
常用方法:
1.页面跳转方式:
htm中使用的方式:
①不带参数写法:
<router-link to="home">点我</router-link>
<router-link v-bind:to="'home'">点我</router-link>
<router-link :to="'home'">Home</router-link>
<router-link :to="{ path: 'home' }">Home</router-link>
② 带参数写法:
A: <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
批注:路由配置格式:
{ path: '/user/:userId', name: 'user', component: User }
导航显示:/user/123
B: <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
批注:带查询参数
导航显示:/register?plan=private
js中使用的方式:
① this.$router.push('xxx') //字符串,这里的字符串是路径path匹配噢,不是router配置里的name
②this.$router.push({ path: 'home' }) //对象
③ this.$router.push({ name: 'user', params: { userId: 123 }}) //
命名的路由 这里会变成 /user/123
④ this.$router.push({ name: 'user', query: { userId: 123 }}) //
命名的路由 这里会变成 /user?userId=123
⑤ this.$router.push({ path: 'register', query: { plan: 'private' }})
// 带查询参数,变成 /register?plan=private
⑥ this.$router.push({ path: 'register', params: { plan: 'private' }})
//报错
ps:由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。
需要用name来指定页面。及通过路由配置的name属性访问
2.获取路由相关参数:
① ‘http://localhost:8080/linkParamsQuestion?age=18’
let age = this.$route.query.age; //问号后面参数会被封装进 this.$route.query;
② 'http://localhost:8080/linkParamsQuestion/user/evan/post/123’
注:user/:username/post/:post_id(这种配置方式)
let name = this.$route.params.username; // 链接里的name被封装进了 this.$route.params
3.检测路由
watch:{
'$route': function (to,from) {
// 对路由变化作出响应...
}
}
或者
watch: {
"$route": "routeChange",
},
methods: {
routeChange(){
console.log(this.$route.path);
}
}
4.route属性
属性 | 说明 |
---|---|
$route.path | 当前路由对象的路径,如'/view/a' |
$rotue.params | 关于动态片段(如/user/:username )的键值对信息,如{username: 'paolino'} |
$route.query | 请求参数,如/foo?user=1 获取到query.user = 1 |
$route.router | 所属路由器以及所属组件信息 |
$route.matched | 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 |
$route.name | 当前路径名字 |
$route.matched
属性,它是一个包含性的匹配,它会将嵌套它的父路由都匹配出来。
例如,/home/news/detail/:id
这条路径,它包含3条匹配的路由:
- /home/news/detail/:id
- /home/news
- /home
5.在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了
<router-view :key="key"></router-view> computed: { key() { return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date() } }
6.路由元信息meta字段
未完待续。。。。
7.非必传参数路由配置
应用:
this.$router.push({ path: 'member', query: { type: 1 }})
错误配置:
{ path: 'member/:type', hidden: false, component: resolve => require(['@/views/modules/main/delMan.vue'], resolve),//懒加载, name: 'tag/index/member', meta: { _menuName: '删除'} },
效果:http://v.study.com/#/error/404?type=1
正确配置:
{ path: 'member', hidden: false, component: resolve => require(['@/views/modules/main/delMan.vue'], resolve),//懒加载, name: 'tag/index/member', meta: { _menuName: '删除'} },
效果:http://v.study.com/#/test/member?type=1
8.this.$router.resolve实现页面跳转并传参并在新窗口打开
let lybl = ''; lybl = this.$router.resolve( { path: 'EnterpriseReport', query:{ ancheid: id , ancheyear: ancheyear }}) window.open(lybl.href, '_blank')
9.既有params 参数,又有query参数
let options= { name: "XXX", params: { id: 1, }, query: { from: 1 }, } this.$router.push(options)
10、route和router的区别
- router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样。
- route相当于当前正在跳转的路由对象。每一个路由都会有一个router对象,可以从里面获取name,path,params等。
相关资料:
欢迎关注我,一起进步!扫描下方二维码即可加我QQ
![](https://www.cnblogs.com/images/cnblogs_com/websmile/1492407/t_smile%E8%BD%AC%E8%A7%92.jpg)