vue-router02

vue-router01 的下篇

这篇主要说到 vue-router 命名路由 编程式导航和一些其他属性

命名路由

语法:
{name: 'user',path: '/user/:id',component: User}
在路由的配置规则中给路由起一个名称

编程式导航

`this.$router.push(‘hash 地址’)

this.$router.push({name: ‘user’ })

this.$router.push({path: ‘/user’ })`

this.$router.go(n) (n> 0 前进 n<0 后退)

vue-router 中的其他属性:
tag:
<router-link></router-link> 标签默认渲染为a 标签 通过tag 属性可以改变 渲染
<router-link tag='div' ></router-link> 将渲染为div
exact:
这个属性表示式严格模式
replace:
这个属性：页面切换时不会留下历史记录
<router-link replace ></router-link>

这个属性是vue-router 中的配置
active-class:
默认值：router-link-active 如果没有设置，就会被渲染为这个class

下面继续探讨vue 的传参问题

<router-link ></router-link> 中的to 属性
to 属性可以是v-bind 属性
<router-link :to={name: 'user' } ></router-link>
可以跳转vue-router 规则中配置 name: 'user’的路由
<router-link :to={path: '/user' } ></router-link>
可以跳转vue-router 规则中配置 path: '/user’的路由

跳转的时候还可以携带参数
<router-link :to={name: 'user',params: {id: 1} } ></router-link>
浏览器地址栏 : user/1
<router-link :to={name: 'user',query: {id: 1} } ></router-link>
浏览器地址栏 : user?id=1

也可以这种
<router-link :to={name: 'user',params: {id: 1}, query: {a: 1} } ></router-link>

<router-link :to={name: 'user',params: {id: 1}, query: {a: 1} } ></router-link>
接收参数:

{
	name: 'user',
	path: '/user/:id',
	component: User,
	props: route=>({uname:'123',age: 12,id: route.params.id , a: router.query.a }) 
},

拿不到path: ‘user/:id’ 拿不到这个参数

<router-link :to={path: '/user',params: {id: 1}, query: {a: 1} } ></router-link>
接收参数:

{
	name: 'user',
	path: '/user/:id',
	component: User,
	props: route=>({uname:'123',age: 12,id: route.params.id , a: router.query.a }) 
},

那不到 params 中的参数

还是结合使用
{name: ‘user’,params: {}}
{path: ‘/user’,query: {}}