語法

// 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ù)組，每個(gè)元素對象必須包含兩個(gè)屬性(path, <組件>)
        0.name 路由名(可選)
        1.path 監(jiān)聽的路由鏈接地址
        2.component 組件，屬性值為組件對象
     */
    routes: [
        {
            path: '/login',
            component: login
        },
        {
            name: 'register2', // 定義路由名，與下方重定向?qū)ο蠓绞降膎ame屬性對應(yīng)
            path: '/register',
            component: register
        },
        // 重定向
        {
            path: '/redirect-login',
            redirect: '/login'
        },
        {
            path: '/redirect-register',
            // 重定向的目標(biāo)也可以是一個(gè)命名的路由：name 指向路由規(guī)則中指定了name屬性的對象
            // PS: 官方文檔中此處 name 屬性為 'foo'，卻未說明 foo 的指向，筆者學(xué)習(xí)時(shí)翻閱許久算是一個(gè)坑
            redirect: {name: 'register2'}
        },
    ],
    // 設(shè)置連接激活的樣式名替換默認(rèn)類名(css代碼略)
    linkActiveClass: 'myactive'
})

let vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    router: router
})

官方文檔