装Vue Router

Vue Router 是官方的 Vue 路由器，负责根据 URL 的变化来渲染不同的视图。

首先，安装 Vue Router：

npm install vue-router

设置路由视图

设置路由视图，首先定义路由配置，并创建不同的组件：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(Router);
export default new Router({
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About }
    ]
});

然后在主文件中引入并使用路由：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

路由参数与导航守卫

路由参数可以通过 :id 进行动态绑定。例如，创建一个用户详情页面：

import Vue from 'vue';
import Router from 'vue-router';
import User from './components/User.vue';
Vue.use(Router);
export default new Router({
    routes: [
        { path: '/user/:id', component: User }
    ]
});

导航守卫可以用来控制导航行为。例如，可以使用 beforeEach 守卫来拦截所有导航：

router.beforeEach((to, from, next) => {
    // 进行某种验证
    next();
});