vue-router 命名路由&编程式导航

命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

在链接路由时通过 :to 绑定路由，name 属性用来确定链接的路由名称，params 传递参数

const router = new VueRouoter({
　　router: [
　　　　{
　　　　　　path: '/user/:id',
　　　　　　name: 'user',
　　　　　　component: User
　　　　}
　　]
})

<router-link :to="{ name: 'user', params: { id: 123 } }">User</router-link>
router.push({ name: 'user', params: { id: 123 }})

编程式导航

页面中导航的两种方式

• 声明式导航：通过点击链接实现导航的方式，叫做声明式导航（例如：普通网页中的<a></.a>链接或vue中的<router-link></router-link>）
• 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航（例如：普通网页中的location.href）

编程式导航基本使用方法

常用的编程式导航API如下：

• this.$router.push('hash地址')
• this.$router.go(n)

const User = {
　　template: '<div><button @click=“goRegister”>跳转到注册页面</button></div>',
　　methods: {
　　　　goRegister: function(){
　　　　　　//用编程的方式控制路由跳转
　　　　　　this.$router.push('/register');
　　　　}
　　}
}

router.push() 方法的参数规则

 //字符串（路径名称）
router.push('/home')
//对象
router.push({ path: '/home' })
//命名空间
router.push({ name: '/user', params: {userId: 123 }})
//带查询参数，变成/register?uname=yzy
router.push({ path: '/register', query: { uname: 'yzy' } })