Vue-Router路由使用详解（一）

0.安装及使用

npm install vue-router --save

<!-- 使用 router-link 组件来导航 -->
<router-link to="/index">Index</router-link>
<!-- 路由出口，路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 组件懒加载
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  // 取消hash模式，即访问路径没有#
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

1.动态路由匹配

1. 动态路由匹配是指通过某种匹配模式得到的路由，映射到同一个组件，达到组件复用的目的。

2. 如果从当前组件跳转到当前组件，此时参数不会动态响应读取，需要watch监听$route

3. 更详细的写法可以参考路由传参部分

const router= new Router({
  routes:[
   {
     // 路径参数通过:标记，如果router-link匹配到，就将参数添加到 this.$route.params 中
      path:'/user/:userId',
      name:'User',
      component: () => import('../views/user/')
    }
 ]
});

需要注意，如果多个路由匹配到一个组件，则会复用该组件，导致的问题就是组件的声明周期不会再次调用。此时如果需要作出响应，则需要 Watch 监听 $route。也可以使用路由守卫（详解二中）

import { Vue, Component, Watch } from "vue-property-decorator";

@Component({
  created () {
    console.info('created...');
  },
  mounted () {
    console.info(this.$route.params);
  }
})
export default class NAME extends Vue {
  @Watch("$route") paramsChanged(to, from) {
    console.info('params changed...')
  } 
}

另：匹配优先级是先定义的优先级高

2.路由传参

https://blog.youkuaiyun.com/a_Novice_Programmer/article/details/112596510

3.路由嵌套

个人理解一句话总结：路由嵌套表示路由出口的嵌套，即router-view的嵌套。

<template>
  <div>
    <a-tabs :default-active-key="activeKey" @change="callback">
      <a-tab-pane key="1" tab="Tab 1"></a-tab-pane>
      <a-tab-pane key="2" tab="Tab 2"></a-tab-pane>
    </a-tabs>
    <!-- 自页面上的 路由出口， 提供给孙子页面使用 -->
    <router-view></router-view>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Tabs } from "ant-design-vue";

@Component({
  components: {
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
  },
})
export default class NAME extends Vue {
  activeKey = "1";
  // component
  callback(activeKey: string) {
    if (activeKey == "1") {
      this.$router.push({
        path: "/menusManage/tab1",
        query: {
          name: "tab1 Title",
        },
      });
    } else if (activeKey == "2") {
      this.$router.push({
        path: "/menusManage/tab2",
        query: {
          name: "tab2 Title",
        },
      });
    }
  }
}
</script>
<style>
@import url("");
</style>

{
    path: "/menusManage",
    name: "MenusManage",
    component: () => import("@/views/manage/menus.vue"),
    children: [
      {
        // 空路由表示默认页面
        path: "",
        name: "TAB1",
        component: () => import("@/views/manage/tab1.vue")
      },
      {
        // 嵌套路由中的path不能使用“/”，使用“/”表示根。
        path: "tab1",
        name: "TAB1",
        component: () => import("@/views/manage/tab1.vue")
      },
      {
        path: "tab2",
        name: "TAB2",
        component: () => import("@/views/manage/tab2.vue")
      }
    ]
  }

在使用嵌套路由的时候注意一下几点：

1. 可以设置空路由，表示默认跳转页面
2. 子路由的path不要使用“/”，使用“/”表示跟路径
3. 其他路由设置规则，同一般路由

4.命名路由

在创建Router实例的时候，给路由设置name属性。用于跳转路由的时候通过name去动态匹配。

router.push({ name: 'user', params: { userId: '123' }})

具体例子可以查看路由传参

5.路由导航

1. 声明式导航

   <router-link :to="">
   

2. 编程式导航

   router.push(...)
   

扩展编程式导航：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

6.命名视图

<template>
  <div id="app">
    <router-view class="default-view"/>
    <router-view class="left-view" name="left"/>
    <router-view class="content-view" name="content"/>
  </div>
</template>

{
  path: '/',
  name: 'Home',
  components: {
    default: Home,
    left: () => import('@/views/left.vue'),
    content: () => import('@/views/content.vue'),
  } 
}

同一个页面展示多个视图，如果不用嵌套，只能采用命名视图，同时需要注意命名视图只能放在最顶级的页面中。

7.嵌套命名视图

嵌套命名视图写法同命名视图，在配置路由的时候使用components：

{
    path: "/menusManage",
    name: "MenusManage",
    component: () => import("@/views/manage/menus.vue"),
    children: [
      {
        // 空路由表示默认页面
        path: "",
        name: "TAB1",
        components: {
          default: () => import("@/views/manage/tab1.vue"),
          tab1: () => import("@/views/manage/tab1.vue"),
          tab2: () => import("@/views/manage/tab2.vue")
        }
      }
    ]
  }

<template>
  <div class="">
    <!-- 不指定name属性，则对应路由配置中的default加载的组件 -->
    <router-view class=""></router-view>
    <router-view class="tab1-view" name="tab1"></router-view>
    <router-view class="tab2-view" name="tab2"></router-view>
  </div>
</template>

8.重定向和别名

重定向，去匹配重定向的新路由：

const routes: Array<RouteConfig> = [
  {
    path: "/",
    redirect: "/home"
    //redirect: "/home/:id" // 带参数重定向
    //redirect: { name: "Home"} // 可以通过命名路由的name进行重定向
  },
  {
    path: "/home",
    name: "Home",
    component: Components
  }
];

别名和path都指向同一个路由：

  {
    path: "/",
    redirect: "/home"
  },
  {
    path: "/home",
    name: "Home",
    component: Components,
    alias: "/alias"
  },