命名路由的配置規則

為了更加方便的表示路由的路徑，可以給路由規則起一個別名，即為“命名路由”。

在連結路由時通過 :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() 方法的引數規則

1  //字串（路徑名稱）
2 router.push('/home')
3 //物件
4 router.push({ path: '/home' })
5 //名稱空間
6 router.push({ name: '/user', params: {userId: 123 }})
 
7 //帶查詢引數，變成/register?uname=yzy
8 router.push({ path: '/register', query: { uname: 'yzy' } })