VUE | 路由

1. 路由：一个路由（route）就是一级映射关系（key-value），多个路由需要路由器（router）进行管理；
2. 路由分为前端路由和后端路由；
3. 我主要学的是前端路由，前端路由的key是路径，value是组件

目录

一、基本使用

二、几个注意点

三、多级路由（嵌套路由）

四、路由的query参数

五、命名路由

六、路由的params参数

---

一、基本使用

1.安装vue-router,命令: npm i vue-router

2.应用插件：Vue.use(VueRouter)

3.编写router配置项：

import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'

const routes = [
    {
        path:'/about',
        component:About
    },
    {
        path:'/home',
        component:Home
    }
]

const router = new VueRouter({
        routes
})
export default router

 4.实现切换（active-class可配置高亮样式）

<ul>
	<li ><router-link active-class='hover' to='/about'>公司简介</router-link></li>
	<li><router-link active-class='hover' to='/home'>联系方式</router-link></li>
</ul>	

 5.指定展示位置

<router-view></router-view>

二、几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

2.通过切换，‘隐藏’了的路由组件，默认是被销毁的，需要的时候再去挂载

3.每个组件都有自己的$route属性，里面存储着自己的路由信息

4.整个应用只有一个router，可以通过组件的$router属性获取到

三、多级路由（嵌套路由）

1.配置路由规则，使用children配置项：

const router = new VueRouter({
        routes :  [
            {
                path:'/about',
                component:About
            },
            {
                path:'/home',
                component:Home,
                children:[//通过children配置子级路由
                    {
                        // 二级路由不需要加‘/’
                        path:'message',
                        component:Message
                    },
                    {
                        path:'news',
                        component:News
                    }
                ]
            }
        ]
})

2.跳转（要写完整路径）：

<router-link to='/home/news'>News</router-link>

四、路由的query参数

1.传递参数：

 <ul>
    <li v-for="m in messageList" :key="m.id">
      <!-- 跳转并携带query参数，to的字符串写法 -->
      <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`"></router-link> -->
      <!-- to的对象写法query传参 -->
      <router-link :to="{
        path:'/home/message/detail',
        query:{
          id:m.id,
          title:m.title
        }
      }">{{m.title}}</router-link>
    </li>
  </ul>

2.接收参数：

$route.query.id
$route.query.title

五、命名路由

1.作用：可以简化路由的跳转

2.如何使用:

 routes :  [
            {
                path:'/about',
                component:About
            },
            {
                path:'/home',
                component:Home,
                children:[
                    {
                        // 二级路由不需要加‘/’
                        path:'message',
                        component:Message,
                        children:[
                            {
                                name:'xiangqing',//给路由命名
                                path:'detail',
                                component:Detail
                            }
                        ]
                    },
                    {
                        path:'news',
                        component:News
                        
                    }
                ]
            }
        ]

2.简化跳转：

<!--简化前，需要写完整的路径-->
<router-link to='/home/message/detail'>跳转</router-link>
<!--简化后，直接通过名字跳转-->
<router-link :to='{name:"hello"}'>跳转<router-link>

六、路由的params参数

1.配置路由，声明接收params参数

routes :  [
            {
                path:'/about',
                component:About
            },
            {
                path:'/home',
                component:Home,
                children:[
                    {
                        // 二级路由不需要加‘/’
                        path:'message',
                        component:Message,
                        children:[
                            {
                                name:'xiangqing',//给路由命名
                                path:'detail/:id/:title',//使用占位符声明接收params参数
                                component:Detail
                            }
                        ]
                    },
                    {
                        path:'news',
                        component:News
                        
                    }
                ]
            }
        ]

2.传递参数

      <!-- params传参 -->
      <!-- 跳转并携带params参数，to的字符串写法 -->
      <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
      <!-- 跳转并携带params参数，to的对象写法 ，必须与name配合使用-->
      <!-- <router-link :to="{
        name:'xiangqing',
        params:{
          id:m.id,
          title:m.title
        }
      }">{{m.title}}
      </router-link> -->

七、路由的props配置

作用：让路由组件更方便的收到参数

 routes :  [
            {
                path:'/about',
                component:About
            },
            {
                path:'/home',
                component:Home,
                children:[
                    {
                        // 二级路由不需要加‘/’
                        path:'message',
                        component:Message,
                        children:[
                            {
                                name:'xiangqing',//给路由命名
                                path:'detail/:id/:title',//使用占位符声明接收params参数
                                component:Detail,
                                // 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
                                // props:{a:900}
                                // 第二种写法：props值为布尔值，布尔值为真，则把路由收到的所有params参数通过props传给Detail组件
                                // props:true
                                // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
                                props(route){
                                    return{
                                        id:route.query.id,
                                        title:route.query.title
                                    }
                                }
                            }
                        ]
                    },
                    {
                        path:'news',
                        component:News
                        
                    }
                ]
            }
        ]

关于路由的七七八八，已经说的差不多了，希望对大家有所帮助吧。

拜比~