vue-5

1、在vue-cli中如何安装和配置路由，哪些核心步骤

五个基础步骤+两个核心步骤

①装包 vue-router@3.5.3

 yarn add vue-router@3.5.3

②在main.js中引入 VueRouter函数

 import VueRouter from 'vue-router'

③添加到 Vue.use()身上

 Vue.use(VueRouter)

④创建路由对象

 const router = new VueRouter({ })

⑤将路由对象注入到 new Vue实例中

 new Vue({
   router
 })

⑦配置路由规则

 import Find from '../路径/Find.vue'
 const router = new VueRouter({
   routes: [ // route: 一条路由规则
     {
       path: '/find', // 路径
       component: Find, // 组件
     }
   ],
 })

⑧指定路由出口 router-view

 <router-view></router-view>

2、一个路由映射对象包含哪些核心配置属性

routes,mode

3、什么场景下会用到嵌套路由，如何配置嵌套路由

场景:可以根据提供的URL来访问对应层级的组件，并将子组件的内容，渲染至上一级的 <router-view>

配置: 在一级路由的配置中加上 children属性,children对应的数组,和 routes的配置规则一样

 const routes = [
   // 配置一级路由
    {
     path: '/',
     component: Layout,
     redirect: '/article', //重定向
     // 配置子路由(二级路由)
     children:[
       // 一个对象表示一个子路由规则 
       // 注意: 子路由写 path 不需要以 /开头 
       //会自动拼接父级路由的path
      { path: '/article',component: Article} ,
      { path: '/like',component: Like} ,
      { path: '/user',component: User} ,
      { path: '/collect',component: Collect} 
     ]
    }
 ]

4、如何配置动态路径参数，并且取值

路由参数使用 : 标记

// 配置路径参数:
 this.$router.push('/part/小雪')
 // 需要提前在 index.js 中定义路由规则
 const routes = [
     {
       name: 'find',
       path:'/find/:name',
       component: Find
     }
 ]
 ​
 // 取值
 $route.params.xxx

取值: 无论用什么方式跳转传参,最后都用相同的方式接收参数

 // 配置路径参数:
 this.$router.push({
         path: '/my?name=佩奇&age=18',
         query:{ //本质上也是在path上进行拼接
           name: '阿天',
           age: 18
         }
 })       
 ​
 // 取值
 $route.query.xxx

5、页面之间传值有哪些方式

①path+query

 this.$router.push({
         path: '/my?name=佩奇&age=18',
         query:{ //本质上也是在path上进行拼接
           name: '阿天',
           age: 18
         }
 })    

②name+query

toFind(){
       this.$router.push({
         name: 'find',
         query:{ 
           name: '阿天',
           age: 18
         }
  })

③name+params

toFind(){
       this.$router.push({
         name: 'find',
         params:{ 
           name: '学习',
           age: 88
       }
  })

④路径参数传参

 // 配置路径参数:
 this.$router.push('/part/小雪')
 // 需要提前在 index.js 中定义路由规则
 const routes = [
     {
       name: 'find',
       path:'/find/:name',
       component: Find
     }
 ]