vue-router的基本使用-vue中的routerview

 

基本使用

安装

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官方提供了路由嵌套的基本操作。链接：

https://router.vuejs.org/zh/guide/essentials/nested-routes.html

下面演示如何将几个相关的基础路由合并成一个嵌套路由：

//有以下路由信息 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(); } })