0
点赞
收藏
分享

微信扫一扫

Vue路由和React路由

年夜雪 2022-02-23 阅读 68

Vue路由

注意:随着版本更新,vue版本需要对应合适的vue-router版本才能正常工作,比如这里当我安装vue-router时,

npm install vue-router

它默认安装的版本是4.0以上的,在我这个vue2.0版本会各种报错,跟vuex也要对应合适的版本一样,否则会报错,所以安装的时候需要指定版本

npm install vue-router@3.4.9

同vuex一样,在安装好后需要一个router文件夹管理路由,里面的index.js文件由于创建路由,通过VueRouter创建一个路由器。routes是定义的路由匹配规则,需要交给router管理。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
     routes : [
        {
            path:"/about",
            component:AboutCom
       },
        {
            path:"/home",
            component:HomeCom,
            children:[
                {
                   //  path:'/news',这里的/一定要删除是个坑,不然子路由组件渲染不出来
                   path:'news',
                    component:NewCom
                },
                {
                   // path:'/message',这里的/一定要删除是个坑,不然子路由组件渲染不出来
                   path:'message',
                   component:MessageCom,
                   children:[
                       {
                           //传递params参数 需要路由定义时声明
                           // path:"detail/:id/:title/:content",
                           //传递query参数不需要声明
                           path:"detail",
                           component:DetailCom,
                           name:'xiangqing' ,  
                           props(route){
                               console.log(route)
                               const {id,title,content} = route.query
                               return {id,title,content}
                           }        
                        }
                   ]
               },
            ]
           },
       ]
})

main.js里需要引入这个路由器并挂载到vue实例vc

import router from './router'
 new Vue({
  el:"#app",
  router,
  render: h => h(App),
})

上面代码是整体代码,一步一步来,
在这里插入图片描述
在这里插入图片描述

在APP组件里 有两个链接,about和home,这解析出来其实就是a标签 About组件和Home组件由路由控制显示,所以这两个组件是路由组件,就需要在router里定义这两个组件,现在pages文件夹里定义好这两个组件 pages/Home和pages/About,然后在路由器里引入组件开始定义匹配规则

import AboutCom from '../pages/AboutCom'
import HomeCom from '../pages/HomeCom'
  routes : [
        {
            path:"/about",
            component:AboutCom
       },
        {
            path:"/home",
            component:HomeCom,

这样在页面里,通过router-link作为a标签,同时router-view作为占位,到时候路由匹配到哪个组件就展示哪个组件

<router-link to="/about">about</router-link>&nbsp;&nbsp;&nbsp;
   <!-- <a href="">home</a> -->
    <router-link to="/home">home</router-link>&nbsp;&nbsp;&nbsp;
   <router-view></router-view>

这样一级路由就完成了。
接下来是二级路由Home组件里 ,又有导航区 和展示区
在这里插入图片描述
在home的路由里通过children定义子路由

 {
            path:"/home",
            component:HomeCom,
            children:[
                {
                   //  path:'/news',这里的/一定要删除是个坑,不然子路由组件渲染不出来
                   path:'news',
                    component:NewCom
                },
                {
                   // path:'/message',这里的/一定要删除是个坑,不然子路由组件渲染不出来
                   path:'message',
                   component:MessageCom,

注意

   path:'news',

没有/,这是坑,加了的话组件等会儿就展示不出来,其余跟一级组件同理,接着是三级路由,
在这里插入图片描述

接着在message里通过children定义子路由

 path:'message',
                   component:MessageCom,
                   children:[
                       {
                           //传递params参数 需要路由定义时声明
                           // path:"detail/:id/:title/:content",
                           //传递query参数不需要声明
                           path:"detail",
                           component:DetailCom,

其余地方跟一级路由同理,这样一个嵌套路由就完成了。
接下来是给路由传参

传递params参数

params参数在地址栏表现为
在这里插入图片描述
传递params参数需要在路由定义时声明接收params参数

 //传递params参数 需要路由定义时声明
   path:"detail/:id/:title/:content",

在页面的router-link里是使用模板字符串传递的

<router-link :to="`/home/message/detail/${msg.id}/${msg.title}/${msg.content}`">{{msg.title}}</router-link>

params参数藏在$sroute.params里,所以页面要获取这些params可以

<li>id:{{$route.params.id}}</li>

传递query参数

传递query参数在路由定义时不用声明,在浏览器地址栏表现为
在这里插入图片描述
在路由定义时

 //传递query参数不需要声明
                           path:"detail",

在页面的router-link也是模板字符串

<router-link :to="`/home/message/detail/?id={msg.id}&title=${msg.title}&content={msg.content}`">{{msg.title}}</router-link>

query参数藏在$sroute.query里,所以页面要获取这些params可以

<li>id:{{$route.query.id}}</li>

命名路由简化跳转方式

可以在路由定义时给路由命名,方式时name:"名字“

            path:"detail",
            component:DetailCom,
            name:'xiangqing' ,  

在页面的router-link进行跳转时就可以这样写

 <!-- 通过命名路由的方式传参 -->
             <router-link :to="{
                 name:'xiangqing',
                 query:{
                     id:msg.id,
                       title:msg.title,
                         content:msg.content
                 }
             }">
                 {{msg.title}}
                 </router-link>

当然这里也可以由params加入,具体是看路由定义时规定的时哪些值由params传递,哪些由query传递,这样就省略了path一长串。

路由的props配置

想象这样一个场景,点击一条消息进入消息的详情页,需要展示消息的id,title,content等,由于这些信息全保存在$route里所以可以在页面通过params或者query取出
params:

  <li>id:{{$route.params.id}}</li>
        <li>消息:{{$route.params.title}}</li>
        <li>内容:{{$route.params.content}}</li> 

query:

   <li>id:{{$route.query.id}}</li>
         <li>消息:{{$route.query.title}}</li>
        <li>内容:{{$route.query.content}}</li> 

这样代码过于冗余,可以在computed里进行处理再显示,不再赘述,另一种方法是在路由定义时通过props的方式传递,同时在组件里通过props[‘id’,‘title’,‘content’]接收,一般父组件给子组件传值就是这种方式,具体做法是在路由定义时

props:{carName:"奔驰"}这是通过props映射自定义的静态数据
props:true表示映射params参数为props传给路由组件
如果还想映射query参数为props传给路由组件,则必须把props写成
  props(route){
                    const {id,title,content} = route.query
                    return {id,title,content}
                           }        

这里的route是直接放在router管理的,才能取到这个route,放在外面定义好交给router管理的取不到。在页面组件需要定义props接收参数

<script>
    export default {
       props:['id','title','content']
    }
</script>

在页面就可以直接用数据了

    <li>id:{{id}}</li>
         <li>消息:{{title}}</li>
        <li>内容:{{content}}</li>

编程式路由导航

replace – 替换当前记录 不能返回 通过点击事件跳转

this.$router.push(path)this.$router.replace(path)this.$router.back()this.$router.go(-1)this.$router.go(1)
  pushShow(msg){
           this.$router.push({   name:'xiangqing',
               query:{
                     id:msg.id,
                       title:msg.title,
                         content:msg.content
                 }
           })
        }

缓存路由组件

在这里插入图片描述
有这样一个需求,点击News 显示NewCom组件,点击Message显示MessageCom组件,在NewCom组件里输入东西后,点击Message后,再点击News会导致NewCom组件输入内容清空,这是因为在路由的切换过程中,伴随着组件的挂载和卸载,为了使NewCom组件输入框里的内容保持不变,就许哟啊一个keep-alive包裹这个组件的router-view,这样就行了

          <keep-alive>
          <router-view></router-view>
          </keep-alive>

但是,这样做会使得MessageCom的组件也在切换过程中不销毁,为了解决这个问题 只保证NewComers组件不销毁,可以这样添加一个include

   <keep-alive include="NewCom">
          <router-view></router-view>
         </keep-alive>

这个NewCom对应的是这个组件的名字NewCom,NewCom.vue

export default({
    name:"NewCom",
})
举报

相关推荐

0 条评论