vue的router入门

左手的ㄟ右手 2023-09-27 11:21 86阅读 0赞

Vue 路由允许我们通过不同的 URL 访问不同的内容。  
通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。对于Vue的SPA实现的主要依赖于router！！

开发测试环境：基于vue-cli3脚手架搭建的vue项目！！  
置于具体的过程我就不一一叙述了！  
最后的结构目录：  
![在这里插入图片描述][c8eeaa56dc9c4151905f2a779d4201d3.png]  
然后别忘了在main.js里面把路由挂载：  
![在这里插入图片描述][615624b0f2074123865c1976fa1cf47a.png]

### 1.初步接触： ###

（1） **router-link**

类似于html中的 a 标签，但是与又有极大的不同，借助于来创建链接，这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。  
（2）**router-view**  
他则用于显示与url对应的组件，你可以把他放在任何地方，医用来使用你的布局。

（3）小案例：  
**》》》第一步，创建几个组件**  
![在这里插入图片描述][3c07e572813f4126826c7d7877c07538.png]

**》》》第二步，配置路由信息，在router中：**

//1.导入与Router有关的各种依赖
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    //2.通过Vue.use(插件) 安装插件
    Vue.use(VueRouter)
    
    //3.创建VueRouter对象
    const routes = [
        {
        
            path: '/',
            redirect: {
        
                name: 'Home'
            }
    
        },
        {
        
            path: '/StoreTest',
            name: 'StoreTest',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/StoreTest.vue')
        },
        {
        
            path: '/StoreTest2',
            name: 'StoreTest2',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/StoreTest2.vue')
        },
        {
        
            path: '/LineEcharts',
            name: 'LineEcharts',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/LineEcharts.vue')
        },
        {
        
            path: '/about',
            name: 'About',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
        },
        {
        
            path: '/echarts',
            name: 'Echarts',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/echarts.vue')
        },
        {
        
            path: '/home',
            name: 'Home',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
        },
        {
        
            path: '/class',
            name: 'ClassGoods',
            component: () => import(/* webpackChunkName: "about" */ '../views/ClassGoods.vue')
        },
        {
        
            path: '/cart',
            name: 'Cart',
            component: () => import(/* webpackChunkName: "about" */ '../views/Cart.vue')
        },
        {
        
            path: '/goodsCart',
            name: 'GoodsCart',
            component: () => import(/* webpackChunkName: "about" */ '../views/GoodsCart.vue')
        },
        {
        
            path: '/vxeTest',
            name: 'vxeTest',
            component: () => import(/* webpackChunkName: "about" */ '../views/VxeTest.vue')
        },
    
    ]
    //4.配置路由和组件之间的应用关系
    const router = new VueRouter({
        
        mode: 'history',
        base: process.env.BASE_URL,
        routes
    })
    //5.将router对象传入到Vue实例中
    export default router

》》》第三步 使用路由进行映射：  
![在这里插入图片描述][fe7eda9b534b4a12930246f0a34c1526.png]

关于router-link和router-view的知识点我再次重复一遍！！！！  
（1） **router-link**

\*\*

### 2.深入探讨： ###

\*\*

### 1.路由的默认路径： ###

默认情况下，进入网站的首页，我们希望渲染首页的内容。  
但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以。

如何可以让路径默认跳转到首页，并且渲染首页组件呢？  
我们需要多配置一个映射就可以了  
![在这里插入图片描述][54addbd1cd1e4887ae2681c88d0a3d87.png]  
解析：  
我们在routes中又配置一个映射  
path配置的是根路径：/  
redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了。

补充：重定向和请求转发的区别：  
1、重定向是两次请求，转发是一次请求，因此转发的速度要快于重定向

2、重定向之后地址栏上的地址会发生变化，变化成第二次请求的地址，转发之后地址栏上的地址不会变化，还是第一次请求的地址

3、转发是服务器行为，重定向是客户端行为。重定向时浏览器上的网址改变 ,转发是浏览器上的网址不变

4、重定向是两次request，转发只有一次请求

5、重定向时的网址可以是任何网址，转发的网址必须是本站点的网址

### 2.路由的懒加载： ###

说起路由的懒加载一开始看各种文档说实话，不理解，后来仔细看了一篇博主的文章，才恍然大悟，其实路由加载简单说就是如果这个项目做完之后需要打包发到服务器上，然后如果你设置了路由懒加载，那么在打包过程中Webpack回见每个路由组价的代码分割成一个一个的js文件，初始的时候不会加载这些文件，只有当你点击访问这些组件的时候才会加载相应的js文件！！  
![在这里插入图片描述][9b22b9dcbf2e44a289a352e169cf4526.png]  
方法二：（我用的就是方法二）

### 3.路由嵌套 ###

路由嵌套是个啥呢？  
一些应用程序的 UI 由多层嵌套的组件组成。比如你的一个页面是由几个组件构成，这时候就要涉及到路由的嵌套了！！！！  
举个例子，你就明白了！！  
![在这里插入图片描述][55f6c1f8f02246028467a5b3de72e56e.png]  
点击第一个孩子  
![在这里插入图片描述][930fc05a8d2a4900923b18265c9d8a4a.png]  
点击第二个孩子  
![在这里插入图片描述][d2a561bd6ed54e08af8bc96dcc35deb5.png]  
代码呈现：  
（1）父组件：

<template>
        <div >
            <h2>我是父亲</h2>
            <router-link to="/DoubleRouter/son1">第一个孩子</router-link>
           <span>    ||||||  </span>
            <router-link to="/DoubleRouter/son2">第二个孩子</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script>
        export default {
        
            name: "double-router"
        }
    </script>
    
    <style scoped>
    
    </style>

（2）第一个孩子：

<template>
        <div>我是第一个孩子</div>
    </template>
    
    <script>
    
        export default {
        
            name: "son-router"
        }
    </script>
    
    <style scoped>
    
    </style>

（3）第二个孩子：

<template>
        <div>我是第二个孩子</div>
    </template>
    
    <script>
        export default {
        
            name: "sons-router"
        }
    </script>
    
    <style scoped>
    
    </style>

（4）路由配置：**（关键点）在合理注意在children里面的组件路径不需要加 /,这里一定要注意，注意，注意！！！！！**  
![在这里插入图片描述][2217db17f35048378acf68fd6441e61e.png]  
代码如下：

//1.导入与Router有关的各种依赖
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    //2.通过Vue.use(插件) 安装插件
    Vue.use(VueRouter)
    
    //3.创建VueRouter对象
    const routes = [
        {
        
            path: '/',
            redirect: {
        
                name: 'Home'
            }
    
        },
        {
        
            path: '/DoubleRouter',
            name: 'DoubleRouter',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/DoubleRouter.vue'),
            children:[
                {
        
                    path:"son1",
                    component: () => import(/* webpackChunkName: "about" */ '../views/SonRouter.vue')
                },
                {
        
                    path:"son2",
                    component: () => import(/* webpackChunkName: "about" */ '../views/SonsRouter.vue')
                }
            ]
        },
    
        {
        
            path: '/StoreTest',
            name: 'StoreTest',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/StoreTest.vue')
        },
        {
        
            path: '/StoreTest2',
            name: 'StoreTest2',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/StoreTest2.vue')
        },
        {
        
            path: '/LineEcharts',
            name: 'LineEcharts',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/LineEcharts.vue')
        },
        {
        
            path: '/about',
            name: 'About',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
        },
        {
        
            path: '/echarts',
            name: 'Echarts',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/echarts.vue')
        },
        {
        
            path: '/home',
            name: 'Home',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
        },
        {
        
            path: '/class',
            name: 'ClassGoods',
            component: () => import(/* webpackChunkName: "about" */ '../views/ClassGoods.vue')
        },
        {
        
            path: '/cart',
            name: 'Cart',
            component: () => import(/* webpackChunkName: "about" */ '../views/Cart.vue')
        },
        {
        
            path: '/goodsCart',
            name: 'GoodsCart',
            component: () => import(/* webpackChunkName: "about" */ '../views/GoodsCart.vue')
        },
        {
        
            path: '/vxeTest',
            name: 'vxeTest',
            component: () => import(/* webpackChunkName: "about" */ '../views/VxeTest.vue')
        },
    
    ]
    //4.配置路由和组件之间的应用关系
    const router = new VueRouter({
        
        mode: 'history',
        base: process.env.BASE_URL,
        routes
    })
    //5.将router对象传入到Vue实例中
    export default router

（5）父组件访问：  
![在这里插入图片描述][c026d2da0f734e24ba47419b58ce8b6f.png]

### **4.路由的动态参数匹配：** ###

![在这里插入图片描述][e81aa7538e4c446998b3cb785f2e55d3.png]

使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。  
这个问题很关键，组建的生命周期朱慧调用一次！！  
![在这里插入图片描述][da7ed02bc0f942bab31d60c4be1c968c.png]  
在这里的例子使用第一种方法来做的：  
（1）组件相关代码：  
![在这里插入图片描述][b2db010a4e4c439a989d22325acd6b4c.png]  
（2）单参数的动态路由配置：  
![在这里插入图片描述][85ac09e42bdc4fe4ba778752e505ad14.png]  
（3）路由调用：  
![在这里插入图片描述][54bf5be399ae4c69aea787c38af62d35.png]  
（4）结果展示：第一个中国万岁，只显示了一次，而通过watch监听参数的变化则实现了页面响应！！！  
![在这里插入图片描述][394f6b3fd35f4935a5dae6924fa241bb.png]  
关于路由参数的其他知识点：  
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html\#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

\*\*

### 5.使用props获取参数信息 ###

\*\*  
（1）获取参数信息前面说过一种了，利用$router.params.id来获取。  
（2）这里介绍另外一种获取参数信息的方法，及利用props来获取！！  
![在这里插入图片描述][513c7d4b8bde49d68ab82ad3f9319499.png]  
![在这里插入图片描述][1b10ee326cee4e77a8b2a90eb9c17477.png]

结果展示：  
![在这里插入图片描述][529e3216d5404dec8431f8012e3a2ec0.png]

\*\*

### 6.编程式导航： ###

\*\*  
除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。  
![在这里插入图片描述][f7f0d0ff47844ef7898ce0367ab7c13c.png]  
![在这里插入图片描述][58b67434b17543719f4570bbe847caf6.png]  
![在这里插入图片描述][d6f0235548e54c0ea5a9674436e68e7f.png]  
看到这里的话，基本上router的基础知识，你已经掌握了！然后，后续再来一篇关于router的高阶用法吧！！！![在这里插入图片描述][7655d8cbad8d4190b7767a1fd22d5139.png]

[c8eeaa56dc9c4151905f2a779d4201d3.png]: https://img-blog.csdnimg.cn/c8eeaa56dc9c4151905f2a779d4201d3.png
[615624b0f2074123865c1976fa1cf47a.png]: https://img-blog.csdnimg.cn/615624b0f2074123865c1976fa1cf47a.png
[3c07e572813f4126826c7d7877c07538.png]: https://img-blog.csdnimg.cn/3c07e572813f4126826c7d7877c07538.png
[fe7eda9b534b4a12930246f0a34c1526.png]: https://img-blog.csdnimg.cn/fe7eda9b534b4a12930246f0a34c1526.png
[54addbd1cd1e4887ae2681c88d0a3d87.png]: https://img-blog.csdnimg.cn/54addbd1cd1e4887ae2681c88d0a3d87.png
[9b22b9dcbf2e44a289a352e169cf4526.png]: https://img-blog.csdnimg.cn/9b22b9dcbf2e44a289a352e169cf4526.png
[55f6c1f8f02246028467a5b3de72e56e.png]: https://img-blog.csdnimg.cn/55f6c1f8f02246028467a5b3de72e56e.png
[930fc05a8d2a4900923b18265c9d8a4a.png]: https://img-blog.csdnimg.cn/930fc05a8d2a4900923b18265c9d8a4a.png
[d2a561bd6ed54e08af8bc96dcc35deb5.png]: https://img-blog.csdnimg.cn/d2a561bd6ed54e08af8bc96dcc35deb5.png
[2217db17f35048378acf68fd6441e61e.png]: https://img-blog.csdnimg.cn/2217db17f35048378acf68fd6441e61e.png
[c026d2da0f734e24ba47419b58ce8b6f.png]: https://img-blog.csdnimg.cn/c026d2da0f734e24ba47419b58ce8b6f.png
[e81aa7538e4c446998b3cb785f2e55d3.png]: https://img-blog.csdnimg.cn/e81aa7538e4c446998b3cb785f2e55d3.png
[da7ed02bc0f942bab31d60c4be1c968c.png]: https://img-blog.csdnimg.cn/da7ed02bc0f942bab31d60c4be1c968c.png
[b2db010a4e4c439a989d22325acd6b4c.png]: https://img-blog.csdnimg.cn/b2db010a4e4c439a989d22325acd6b4c.png
[85ac09e42bdc4fe4ba778752e505ad14.png]: https://img-blog.csdnimg.cn/85ac09e42bdc4fe4ba778752e505ad14.png
[54bf5be399ae4c69aea787c38af62d35.png]: https://img-blog.csdnimg.cn/54bf5be399ae4c69aea787c38af62d35.png
[394f6b3fd35f4935a5dae6924fa241bb.png]: https://img-blog.csdnimg.cn/394f6b3fd35f4935a5dae6924fa241bb.png
[513c7d4b8bde49d68ab82ad3f9319499.png]: https://img-blog.csdnimg.cn/513c7d4b8bde49d68ab82ad3f9319499.png
[1b10ee326cee4e77a8b2a90eb9c17477.png]: https://img-blog.csdnimg.cn/1b10ee326cee4e77a8b2a90eb9c17477.png
[529e3216d5404dec8431f8012e3a2ec0.png]: https://img-blog.csdnimg.cn/529e3216d5404dec8431f8012e3a2ec0.png
[f7f0d0ff47844ef7898ce0367ab7c13c.png]: https://img-blog.csdnimg.cn/f7f0d0ff47844ef7898ce0367ab7c13c.png
[58b67434b17543719f4570bbe847caf6.png]: https://img-blog.csdnimg.cn/58b67434b17543719f4570bbe847caf6.png
[d6f0235548e54c0ea5a9674436e68e7f.png]: https://img-blog.csdnimg.cn/d6f0235548e54c0ea5a9674436e68e7f.png
[7655d8cbad8d4190b7767a1fd22d5139.png]: https://img-blog.csdnimg.cn/7655d8cbad8d4190b7767a1fd22d5139.png