Подробное использование vue+vue-router

1. vue и vue-маршрутизатор

npm install  -save vue-router  
//package文件的dependencies节点写入依赖   dependencies部署是需要的 depenDencies 开发依赖，部署时不需要

2. vue ссылается на vue-router
и создает папку маршрутизатора в каталоге src.
Создайте файл index.js в папке маршрутизатора.

index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
    routes: [
		        {
		            path: '/',
		            name: 'login',
		            component: Login
		        },
		         {
		            path: '*',
		            name: '404',
		            component: E404
		        },
		        {
		          path: '/404',
		          name: '404',
		          component: E404
		        },
         ],
});

Добавьте index.js в main.js.

import router from './router/index';

let vue = new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

3. Конфигурация маршрутизатора
. Вложенная маршрутизация. Будьте осторожны, не начинайте подмаршрут с «/».

{
            path: '/component',
            name: 'component',
            meta: {
                requireAuth: true // 判断是否需要登录
            },
            component: Component,
            children: [
                {
                    path: 'view',
                    component: MyComponent
                },
                {
                    path: 'upload',
                    component: UploadComponent
                },
                {
                    path: 'setting',
                    component: SetComponent
                },
                {
                    path: 'update',
                    component: UpdateComponent
                }
            ]
        },

4. Использование маршрутизации

路由跳转
 this.$router.push("")；
 监听路由变化
  watch: {
            $route(to , from){
              let path = to.path;
              if(path.lastIndexOf("/") > 0){
                path = path.substring(path.lastIndexOf("/")+1);
              }
              this.active = path;
            }
          }

Дополнительную информацию см. в документации API.

5. Разница между $router и $route:
$router — это глобальный объект маршрутизации, который можно использовать для переходов маршрутизации и т. д.
$route — это объект текущего маршрута, который можно использовать для получения адреса, параметров, и т. д. текущего маршрута.

Подробное использование vue+vue-router

рекомендация