从零搭建vue3项目（三）安装配置vue router

安装vue router 4.x

vue router官网：https://next.router.vuejs.org/zh/

一、使用npm包管理器安装

# 安装指令
$ npm install vue-router@4

直接下载或者使用cdn引入

https://unpkg.com/vue-router@4

二、创建一个公共基础配置项文件

// src目录下创建一个router目录router目录下创建一个index.ts

import {createRouter, createWebHistory} from 'vue-router'

//  路由配置
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: () => import('../views/Home.vue'),
        meta: {
            title: 'Home'
        },
    }
];

// router实例
const router = createRouter({
    history: createWebHistory(),
    routes,
});


// 全局前置守卫
router.beforeEach((to, from, next) => {
    next();
});

// 全局解析守卫
router.beforeResolve(async to => {});

// 全局后置钩子
router.afterEach((to, from, failure) => {
    // if (!failure) sendToAnalytics(to.fullPath)
});

export default router

三、在main.ts中全局使用

// main.ts
import Router from './router/router'

app.use(Router)

四、在合适的地方使用路由

<p>
	<router-link :to="{name:'home'}">To Home</router-link>
</p>
<router-view></router-view>

遇见了一个坑，因为暂时没有用的路由前置守卫，所以直接把里面的内容直接注释了，没有调用next()；导致一直没有效果！

五、动态路由

简介：路径参数用冒号 : 表示

const routes = [
  /*
  	当一个路由被匹配时，它的 params 的值将在每个组件中以this.$route.params 的形式暴露出来
  	<div>User {{ $route.params.id }}</div>
  	单个路径参数 example:/user/10086、user/10000
  	{ userId: 'eduardo' }
  */
  { path: '/user/:userId', component: UserDetail.vue },
  
  
  /*
  	多个路径参数，它们会映射到 $route.params 上的相应字段
  	/users/BigBanana/posts/123
  	{ username: 'BigBanana', postId: '123' }
  */
   { path: '/users/:username/posts/:postId', component: User.vue },
]

六、响应参数变化

// 1.watch中监听 $route 对象上的任意属性
const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    )
  },
}

// 2.使用 beforeRouteUpdate 导航守卫，它也可以取消导航：
const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 对路由变化做出响应...
    this.userData = await fetchUser(to.params.id)
  },
}