Vue-router基本使用

基本使用

安装

    1、在使用cli安装vue时手动选择安装router。
    2、使用npm命令安装,以vue3为例，vue3需要4.0以上版本vue-router：
        vue3: npm install vue-router@4

使用

    如果是cli安装，默认会生成router目录，在router目录下会有一个index.js文件，提供基本定义。如果不是cli安装，也可以自己创建，目录自由选择。
router的index.js文件基本格式：

import { createRouter, createWebHistory } from 'vue-router'
//路由数组
const routes = [
	{
		path: "",
		name: "",
		component: 组件对象,
		children: []
	}
]

//路由对象
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes //上面的路由数组
})
//导出路由对象，在main.js中引用
export default router

    router的index.js文件创建好之后，还需要在main.js文件中通过createApp.use()方法引入，参考：

import { createApp } from 'vue'
import Main from './Main.vue'
import router from './router'
import store from './store'
import NutUI from '@nutui/nutui';
import "@nutui/nutui/dist/style.css";

//上方是依赖
//下方通过createApp创建vue对象，然后使用use方法使用依赖
createApp(Main)
    .use(store)
    .use(router)
    .use(NutUI)
    .mount('#app')

    随后在需要使用router的vue组件文件中写明:

<router-view></router-view>

    在网页中通过url写明路由访问。

嵌套路由

    vue-router官方提供了路由嵌套的基本操作。链接。
    下面演示如何将几个相关的基础路由合并成一个嵌套路由：

//有以下路由信息
const loginRouter = [
	{
		path: '/login',
		name: 'Login',
		component: Login
	},
	{
         path: '/login/pc',
         name: 'LoginForPC',
         component: LoginForPC
     },
    {
          path: '/login/phone',
          name: 'LoginForPhone',
          component: LoginForPhone
      }
]

    这是一个路由对象，有三个路由，/login代表登录，/login/pc代表PC端登录页面，/login/phone代表手机端登录页面，下面采用嵌套路由结构，将/login/pc和/login/phone归属于/login，通过children指定子路由：
注意：子路由不能在前面添加 “/”，否则会被认定为一级路由。
注意：父路由必须有一个组件，否则调用路由会报错。

const loginRouter =
    {
        path: '/login',
        name: 'Login',
        component: Login,
        children: [
            {
                path: 'pc',
                name: 'LoginForPC',
                component: LoginForPC
            },
            {
                path: 'phone',
                name: 'LoginForPhone',
                component: LoginForPhone
            }
        ]
    }

    子路由添加完毕后，直接通过url调用会被提示找不到路由，需要在父路由对应组件中添加router-view,添加后才能正常使用，如果不在父路由的组件中添加router-view，那么访问url时只能找到父路由内容而找不到子路由内容。
父路由组件实例：

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "Login"
}
</script>

<style scoped>

</style>

路由文件拆分

    如果把所有的路由信息都写在一个文件就会显得非常臃肿，同时也不便于观看维护，vue中路由的信息都是依赖于一个数组，所以可以将这个数组拆开，分到其他文件夹下的js文件中，通过export导出这些子数组变量，最后将这些子数组变量合并成一个大的数组。

示例

    在router目录下创建主路由文件index.js,内容如下:

import { createRouter, createWebHistory } from 'vue-router'
import {errorRouters} from "@/router/error";
//理由数组，用于存储所有路由数据
let routes = []

/**
 * 添加路由函数，将其他文件的路由数组进行组合
 * @param routers 路由
 * */
function addRouters(routers){
  for (let i = 0; i < routers.length; i++){
    routes.push(routers[i])
  }
}

//调用addRouters组合其他文件的路由
addRouters(errorRouters);

//路由对象
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

    创建一个错误路由文件error.js:

//仅定义一个路由数组存储数据，然后导出，路由合并请看上方的index.js文件
export const errorRouters = [
    {
      path: "/404",
      name: "404Error",
      component: ()=>import("../views/error/404Error")
    },
    {
        path: "/invalidIdError",
        name: "InvalidIdError",
        component: ()=> import("../views/error/InvalidIdError")
    }
]

路由跳转前检查

    可以通过router.beforeEach方法在每个路由的跳转前进行识别，其基本格式如下：

/*
* to  要跳转到哪里
* from 从哪里跳转来
* next  是一个方法，可以传入下一个跳转路由的路径，如果不传参数，代表直接跳转到to这个路由
*/
router.beforeEach((to, from, next) => {
	//进行判断，如果to路径没有匹配到现有的任何一个路由
	//作用：当to的路由为空时不跳转，同时当from的路由也为空时，则跳转到404页面
  if (to.matched.length === 0){
  	//这里打印输出
    console.log(to, from, next)
    //这里用三元表达式进行了判断，当from.name也就是跳转来的路由名称不为空，则直接跳转到from所代表的路由，否则跳转到404页面
    from.name ? next({name: from.name}) : next("/404");
  }else {
  	//如果to的路由名称不为空，则进行跳转
    next();
  }

})