路由模块封装

目标：将路由模块抽离出来

好处：拆分模块，利于维护

src文件夹 下新建 router文件夹，创建index.js文件
index.js写入相关代码 ps： @/代表从src文件夹下开始找

router-link 声明式导航

需求：实现导航高亮效果

vue-router 提供了一个全局组件 router - link（取代a标签）

能跳转，配置 to 属性指定路径，本质还是 a 标签（to 无需＃）
能高亮，默认就会提供高亮类名，可以直接设置高亮样式

    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>

    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>

跳转传参

查询参数传参

to="/path?参数名=值"

对应页面组件接受传递过来的值

$route.query.参数名

    // js中还需加上this
    this.$route.query.参数名

动态路由传参

配置动态路由 /：

const router= new VueRouter({
 routes:[
        ...,
        {
         path:'/search/:参数名',
         component:
        }
    ]
})

配置导航链接

to="/path/值"

对应页面组件接收传递过来的值{{}}

$route.params.参数名

// js中还需加上this
this.$route.params.参数名

动态路由参数的可选符

Vue路由 — 重定向

匹配到path后，强制跳转path路径

语法：在routes里再写一句，第一个‘/要匹配的路径’

{path：‘/’，redirect：‘/重定向的路径’}

const router = new VueRouter({
  routes:[...],
})

Vue路由-404

作用：配在路由最后，当路径找不到匹配时，给个提示页面

const router= new VueRouter({
    routes:[
        ...,
        { path:'*',component:NotFind},
    ]
})

Vue路由-模式设置

hash路由(默认) 例如: http://localhost:8080/#/home

history路由(常用) 例如：http://localhost:8080/home(以后上线需要服务器端支持)

const router = new VueRouter({
    routes,
    mode: "history"
})
// 配置后就采用了 history 模式，地址栏没有#，需要后台配置访问规则

编程式导航

基本跳转

问题：点击按钮跳转如何实现

两种语法：

path路径跳转（简单方便）

this.$router.push({
   path：'路由路径'
})

name命名路由跳转（适合path路径长的场景）

this.$router.push({
   name：'路由名'
})

路由传参

1. path路径跳转传参

query传参

this.$router.push('路由路径?参数名=参数值')

// 完整写法
this.$router.push({
    path：'路由路径'
    query:{
       参数名：参数值，
       参数名：参数值
   }
})

动态路由传参

配置动态路由（上述）

const router= new VueRouter({
   routes:[
        ...,
        {
           path:'/search/:参数名',
           component:
        }
    ]
})

对应页面直接接受传递过来的值（上述）

$route.params.参数名

传参

this.$router.push('/search/${参数值}')

// 完整写法
this.$router.push({
    path:'/search/${this.inpValue}'
})

2. name路径跳转传参

query 传参

this.$router.push({
    name：‘路由名字',
    query: {
        参数名1：'参数值1',
        参数名2：'参数值2',
   }
})

动态路由传参

this.$router.push({
    name：'路由名字',
    params:{
       参数名：'参数值',
   }
})

二级路由

通过children配置项，可以配置嵌套子路由

routes:[
    {
      path: '/find', 
      component: Find，
      children：[
        {
           path:'/qita',
           component:qita
        }
      ]
    },
    { 
      path: '/my', 
      component: My
    }
  ],

组件缓存

keep-alive是Vue的内置组件，当它包裹动态组件（router-view）时，会缓存不活动的组件实例，而不是销毁它们
keep-alive是一个抽象组件：它自身不会渲染成一个dom元素，也不会出现在父组件链中

优点:

在组件切换过程中，把切换出去的组件保留在内存中，防止重复渲染dom

减少加载事件及性能消耗，提高用户体验感

属性：

include ：组件名数组，只有匹配的组件会被缓存.
exclude ：组件名数组，任何匹配的组件都不会被缓存
max：最多可以缓存多少组件实例

组件缓存了之后，就不会触发八个生命周期钩子

但是多了actived和deactived钩子

vue2/3学习(6)

路由模块封装

router-link 声明式导航

跳转传参

查询参数传参

Vue路由 — 重定向

Vue路由-404

Vue路由-模式设置

编程式导航

基本跳转

路由传参

1. path路径跳转传参

2. name路径跳转传参

二级路由

组件缓存