語法
// vue@2.6.0, vue-router@3.0.7 new VueRouter({ routes: [ {name: 'test', path: '/test', component: test} ] })
DEMO
HTML 代碼
// ...
<router-link to="/login">登陸</router-link>
<router-link to="/register">注冊</router-link>
<router-link to="/redirect-login">重定向1</router-link>
<router-link to="/redirect-register">重定向2</router-link>
// ...
JS 代碼
// 定義組件
let login = {
template: '<h1>登陸組件</h1>'
}
let register = {
template: '<h1>注冊組件</h1>'
}
// 定義路由
const router = new VueRouter({
/*
路由匹配規(guī)則數(shù)組碑宴，每個元素對象必須包含兩個屬性(path, <組件>)
0.name 路由名(可選)
1.path 監(jiān)聽的路由鏈接地址
2.component 組件，屬性值為組件對象
*/
routes: [
{
path: '/login',
component: login
},
{
name: 'register2', // 定義路由名，與下方重定向對象方式的name屬性對應
path: '/register',
component: register
},
// 重定向
{
path: '/redirect-login',
redirect: '/login'
},
{
path: '/redirect-register',
// 重定向的目標也可以是一個命名的路由：name 指向路由規(guī)則中指定了name屬性的對象
// PS: 官方文檔中此處 name 屬性為 'foo'该抒，卻未說明 foo 的指向堪澎，筆者學習時翻閱許久算是一個坑
redirect: {name: 'register2'}
},
],
// 設置連接激活的樣式名替換默認類名(css代碼略)
linkActiveClass: 'myactive'
})
let vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router
})
