vue-router的基本使用

2022-04-26 11:22:53

阅读 1102

基本使用

安装

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组件文件中写明:

 

在网页中通过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时只能找到父路由内容而找不到子路由内容。

父路由组件实例:

 

                

 

 

 

 

路由文件拆分

如果把所有的路由信息都写在一个文件就会显得非常臃肿,同时也不便于观看维护,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();

        }

})

缩我,高速云服务器
实时掌握推广动态
让您深入了解用户,提高推广转化率
联系我们
    1. 电话:400-001-9255
      联系客服
      常见问题
  • 公众号
    客服微信
  • 缩我短链接公众号 关注官方公众号
  • 联系客服
  • 400-001-9255 全国免费热线