最详细易懂的vue路由学习笔记整理

快来打我* 2023-02-27 12:28 60阅读 0赞

之前在写vue项目的时候在路由那块不是特别清晰，现在写个整理，记录下自己的学习心得

在以往的网站中，想要做到各个页面跳转会想到用a标签来实现，在vue项目中，想要实现这样的跳转也可以用a标签来，但是相比之下，有一种更好的插件可以用，那就是**路由（router）**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]  
在下面点击跳转页面！！解决哪个路由代表哪个组件显示酱紫！！！

router就像一般的插件一样在vue项目中遵循先安装、配置（默认有个**router.js**配置文件）、使用的流程，在安装手脚架的时候可以一起将router一起安装了；

首先，会自动生成一份router标准文件写法，但是从开始先写最简单最关键的参数配置routes(这里有s的！)，在**router.js**中配置这个文件

// 这里是router.js文件
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router) //使用注册vue这个路由
    export default new Router({ 
        // mode:'history',
        // base:process.env.BASE_URL,
        routes:[
            { //只写哪个路径对应哪个组件
               path:'/film',
               component:Film
            },
            { 
                path:'/cinema',
                component:Cinema
            },
            { 
                path:'/center',
                component:Center
            }
        ]
    })

上面的代码说到，跳转到哪个路径时就展示哪个组件，那接下来就是，在哪里如何跳转到这些路径，组件在哪里怎么展示

写好这三个组件，**组件名一般大写的！【这个嗯】**  
![在这里插入图片描述][20200717191531148.png]  
然后在**router.js**中导入这三个组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 1]  
**注意：@是指默认到src问价下！！可好用了！！**

写完路由后记得在**main.js**那里引入注册才行！！

import App from './App.vue'
    import router from './router'
    import vueConfig from '../lib/vue.config'
    
    vue.config.productionTip = false
    
    new vue({ 
        router,
        // 这里原本可以写是 router：router,ES6语法中key和value值相等时可以省略写
        // router：是固定写法，后面的router是引进的模块命名为了方便理解，写成a也行，但是要和上面引入那里名字一致
        render:h => h(App)
    }).$mount('#box')

加载的组件怎么展示呢，在哪里展示呢，都知道组件要加载到**App.vue**中展示的，但是router中的组件是怎么随着页面的不同在展示呢，**不可能每个组件都在App.vue中使用这样写的，这样没办法根据跳转换页面**  
这时候router插件提供了一个路由容器，就是,相当于一个路由插槽在那里霸位置，到路由说它现在到那个的时候就切换到那个组件

<template>
        <div>
            hello vue
            
            <router-view></router-view>
            
        </div>
    </template>

**做完上面那些操作后，可以实现在网址上面手动加路由后缀实现页面切换，But…大哥，我们是要在点击APP时实现跳转！于是乎！……有了路由声明式导航！**

然后现在的问题是，知道执行的组件在哪里了，那路劲往哪儿链接跳转呢？有了router，肯定不是用a标签啦！

![在这里插入图片描述][20200717231424487.png]  
在使用下面的Tabbar时，使用a标签写跳转时，根据**卖座电影**的那些导航会这样写路径

// 这里写的Tabbar组件
    <template>
        <div>
            <ul>
               <li>
                   <a href="/#film">film</a>  //把井号也给带上了才行
                </li>
               <li>
                   <a href="/#cinema">cinema</a>
                </li>
               <li>
                   <a href="/#center">center</a>
                </li>
            </ul>
        </div>
    </template>

这个时候考虑，使用a标签来跳转页面的话，如何监听路由的变化来做出改变？？\*\*我们需要找到个和路由相关的东西，使得这边点击变化就是路由的变化！\*\*这时，router提供了个很好用的东西来代替a标签，叫

// 这里写的Tabbar组件
    <template>
        <div>
            <ul>
               <li>
               //改成这样子！
                  <router-link to = "/film">film</router-link>
                </li>
               <li>
                   <router-link to = "/cinema">cinema</router-link>
                </li>
               <li>
                  <router-link to = "/center">center</router-link>
                </li>
            </ul>
        </div>
    </template>

**但是这个时候因为相当于渲染的时候将渲染成a链接的，这是是带有a标签的默认样式的，于是乎=> 去除样式，有个自带的功能，就是*tag属性*可以让渲染时成为任何一个标签！！！**

于是乎，直接让其变成li标签！！！

// 这里写的Tabbar组件
    <template>
        <div>
            <ul>          
                  <router-link to = "/film" tag="li">film</router-link>
                   <router-link to = "/cinema" tag="li">cinema</router-link>
                  <router-link to = "/center" tag="li">center</router-link>
            </ul>
        </div>
    </template>

这个时候让标签渲染成li标签，直接不要了原本的li，通过路由实现跳转，而不是超链接的！  
如果我要点击跳转的时候有导航有高亮显示时，给它一个样式绑定过来↓

// 这里写的Tabbar组件
    <template>
        <div>
            <ul>          
                  <router-link to = "/film" tag="li" activeClass="myactive">film</router-link>
                   <router-link to = "/cinema" tag="li" activeClass="myactive">cinema</router-link>
                  <router-link to = "/center" tag="li" activeClass="myactive">center</router-link>
            </ul>
        </div>
    </template>
    
    <style lang="scss" scoped>
        // 加scoped 作为样式的作用域，有好有坏，一般会加
        .myactive{ 
            // background: yellowgreen; 这里相当是li标签了，用的是color
            color: yellow;
        }
    </style>

这时点击就会出现高亮的颜色！！**以上是声明式导航！！**

小总结：1、要将路由配置好  2、要将每个对应的组件写好引入路由配置中  3、组件展示的地方  
     		 4、路由跳转变化之间的联系

有时候需要输错域名后面的时候还是会跳转到首页那样子，称为重定向

export default new Router({ 
        // mode:'history',
        // base:process.env.BASE_URL,
        routes:[
            { //只写哪个路径对应哪个组件
               path:'/film',
               component:Film
            },
            { 
                path:'/cinema',
                component:Cinema
            },
            { 
                path:'/center',
                component:Center
            },
            // 加这一块
            { 
                path:'*',
                redirection:'/film'
            }
        ]
    })

但是在有些时候，会有这样子↓  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20200718145843744.png]  
就是在film里还嵌套着两个可以跳转的子路由，nowplaying和comingsoon，这时，就类似这样子↓  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 3]

**在film里有子路由，在展示film组件的前提下还展示nowplaying或者comingsoon的组件,路由变到子路由时将要展示的nowplaying组件和comingsoon组件插进flim组件中**

这时

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

routes:[
            { //只写哪个路径对应哪个组件
               path:'/film',
               component:Film,
               children:[
                { 
                   path:'/film/nowplaying',
                // 或者写 path:'nowplaying',这样的话就不要斜杠
                   component:Nowplaying
                },
                { 
                    path:'/film/comingsoon',
                    component:Comingsoon
                },
                //这里也可写个子路由的重定向酱紫
                { 
                 path:'*',
                redirection:'/film/nowplaying'
                }
               ]
            },
            { 
                path:'/cinema',
                component:Cinema
            },
            { 
                path:'/center',
                component:Center
            },
            // 加这一块
            { 
                path:'*',
                redirection:'/film'
            }
        ]
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 4]  
这个是根据不同的路由跳转来显示不同组件的一个地方！  
按照上面的做完后，只能在网址上面通过手动修改网址来达到跳转，后面还需要根据子路由导航那里来改，以上是二级路由的处理！！！

接下来的问题是：在有列表展示的地方需要经过点击列表进入相对应的详情页，这时是这个样子的，疫情期间展示不多  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 5]  
实际中我们需要根据获取的数据来跳转到相对应的地方，以Nowplaying 组件为例子，里面有展示很多上映的电影，这时是需要根据某部电影跳转到相应的页面的！

分析：我们需要根据后端获取的数据来根据id跳转，这里涉及到路由的两个概念，这里先说下：  
**$router 和 $route**

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例
    对象，	这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
    
    
    2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的
    name,path,params,query等

**接下来这边如果不是看的很清楚，可以结合后面的vue项目记录再加深理解，这里主要是值 在flim中的列表上（这个列表是渲染出来的），跳转到相对应的详情页，但是这里的detail是在nowplaying那里转过来的，**

接下来的关键点都是：**如何获取数据的id**

在router中配置下

{ 
                // 这样的话加冒号是指动态路由，id是自己取的，不是固定写法，
                path: '/detail/:id',
                component: Detail
            },
            { 
                path: '/cinema',
                component: Cinema
            },
            { 
                path: '/center',
                component: Center
            },

然后在nowplaying中是：  
**这是是编程式导航的详细写法**

<template>
        <div>
            nowplaying
            <ul>
                <li v-for="item in datalist" :key="item" @click=handleChangePage(item)>
                    { { item}}
                </li>
            </ul>
        </div>
    </template>
    
    <script>
    export default { 
        data(){ 
            return{ 
                datalist:["11","22","33"]
            }
        },
        methods:{ 
            handleChangePage(id){ 
                console.log(id)
                // 编程式导航
                // $router这个对象是指在main.js中注册了，然后相当于在整个vue实例中挂载了这样的一个对象的！！
                // 然后push方法就是指定跳转到哪个页面
                // 这里将id传到了detail这个页面中
                this.$router.push(`/detail/${ id}`)
            }
        }
    }
    
    </script>

这里的话是detail中的：

<template>
        <div>
           detail
        </div>
    </template>
    
    <script>
    export default { 
        mouted(){ 
            console.log("要id获取详细信息",this.$route.params.id)
            // 这里打印的对象this.$route是包含
            //这里的id就是打印出11 22 33 这样的
        }
    }
    </script>

小总结下就是：  
1、列表中需要通过 r o u t e r 将 i d 给 传 过 去 ， 2 、 r o u t e r 配 置 中 需 要 将 i d 作 为 一 个 动 态 路 由 3 、 在 d e t a i l 页 面 中 要 通 过 router将id给传过去， 2、router配置中需要将id作为一个动态路由 3、在detail页面中要通过 router将id给传过去，2、router配置中需要将id作为一个动态路由3、在detail页面中要通过route来获取相对应的id

上面的是编程式导航中的跳转导航，还有一种是编程式导航中的命名导航，将这里

{ 
               // 这样的话加冒号是指动态路由，id是自己取的，不是固定写法，
               path: '/detail/:id',
               //加上这句
               name:'kenzi'
               component: Detail
           },

nowplaying中的这句改成：

this.$router.push(`/detail/${ id}`)
    改成：
    this.$router.push(name:"kenzi",{ id:id})

就是可以根据路由命名来写的了！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200717231338847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg==,size_16,color_FFFFFF,t_70
[20200717191531148.png]: https://img-blog.csdnimg.cn/20200717191531148.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200717191854127.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg==,size_16,color_FFFFFF,t_70
[20200717231424487.png]: https://img-blog.csdnimg.cn/20200717231424487.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200718145829355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg==,size_16,color_FFFFFF,t_70
[20200718145843744.png]: https://img-blog.csdnimg.cn/20200718145843744.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200718152517261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg==,size_16,color_FFFFFF,t_70
[20200718152725685.png]: https://img-blog.csdnimg.cn/20200718152725685.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200718152737478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200718170117719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg==,size_16,color_FFFFFF,t_70