VUE路由之---Vue-router

Vue-router介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

router知识扩展

route：单个路由（某一个路由）routers：多个理由集合  router： 路由管理器

Vue-router应用

vue-router中常用属性详解

属性	详解
path	路径
name	命名路由
component	命名视图组件
components	命名视图组件
redirect	重定向路径
alias	别名
children	嵌套路由
meta	路由元信息 使用$route.meta.属性可以获取
caseSensitive	匹配规则是否大小写敏感？(默认值：false)

路由配置及注意事项

1、path: '/'配置的是根路径：/。反映到URL上就是/<path>的/部分。
2、redirect: '/login'，是指将根路径（/）重定向到根路径下的login路径下（/login）
3、path: '/login',需要带“/”，表示根路径下的login路径下（/login）

注：带/，表示绝对路径，/是根路径，表示的是/<path>的/部分。
       不带/，表示相对路径，相对于父路由下的路径（如果没有则找到根路径）
       一般是在  path 或   redirect 里可能用到“/”。

const routes = [
  {
    path: '/',
    redirect: '/login',
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  }
]

嵌套路由

path：'profile'，不需要写 “/”

不写  “/” 代表相对路径，先找到他的父组件/user，最终效果  /user/profile

写了 “/” 代表绝对路径，直接匹配 /profile

const routes = [
  {
    path: '/user',
    name: 'user',
    component: User,
    children: [
      {
        path: 'profile',
        name: 'profile',
        component: UserProfile,
      }
    ],
  },
]

路由传参

1、vue文件中传参

注意：
（1）通过query传参，既可以写path，也可以写name。通过this.$route.query.id获取参数
（2）通过params传参不能写path，只能写name + params。通过this.$route.params.id获取参数

//子路由配置
{
  path: '/child1,
  name: 'child1',
  component: child1
}


//父路由编程式传参(一般通过事件触发)
root1 () {
  // query传参
  this.$router.push({ path: '/child1', query: { id: '123' } })   // /child1?id=123
  this.$router.push({ name: 'child1', query: { id: '456' } })   // /child1?id=456
  // params传参
  this.$router.push({ name: 'child1', params: { id: '789' } })
}

 2、routers中传参

注意：
（1）redirect重定向可以使String类型，也可以是Object类型，Object类型可以携带参数
（2）不能在路由对象中单独添加query和params属性，没有这两个属性

const routes = [
  {
      path: '/',
      // redirect: '/root', // 无参数情况
      // query传参
	  redirect: {path:'/root', query:{ id: '123' }},  // /root?id=123
	  // redirect: {name:'root', query:{ id: '456' }},  // /root?id=456
	  // params传参
	  // redirect: {name:'root', params:{ id: '789' }},
  },
  {
	  path: '/root',
	  name: 'root',
	  component: Root,
      // query:{      错误写法
      //   id: '123'
      // }
	},
]

keep-alive简单使用

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它自身不会渲染成一个 DOM 元素。在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

keep-alive中有三个属性值

1、include： 字符串或正则表达式。只有名称匹配的组件会被缓存。

2、exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存。

3、max：       数字；最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，

                       已缓存组件中最久没有被访问的实例会被销毁掉。

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated：在 keep-alive 组件激活时调用，

             （使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数                     据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。）

deactivated：在 keep-alive 组件停用时调用

// Profile组件会被缓存
// User 组件不缓存，（如果是多个“,”隔开；中间不要加空格）

<keep-alive include="Profile" exclude="User">
   <router-view></router-view>
</keep-alive>

此文章借鉴了下面博主的优秀文章，万分感谢

原文链接：https://blog.csdn.net/Litt_White/article/details/126435871