vue-router 路由

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'

// 引入组件(路由组件一般放在pages文件夹)
import About from '../pages/About'
import Home from '../pages/Home'

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

4、实现切换

<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="about">About</router-link>
<router-link class="list-group-item" active-class="active" to="home">Home</router-link>

5、指定展示位置

<!-- 指定切换后组件呈现内容的位置 -->
<router-view></router-view>

三、注意事项

1、路由组件通常放在pages文件夹，而一般组件通常存放在conponents文件夹；

2、切换不同的路由组件时，隐藏的路由组件本质上默认是被销毁了，需要的时候再重新挂载；

3、每个组件之间共用一个router，可以通过组件的$router属性获取；

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

四、多级（嵌套）路由

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

router/index.js

routes:[
        // 一级路由
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            // 二级路由
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        }
    ]

2、跳转：要写完整路径

<router-link  to="/home/message">Message</router-link>

五、路由的query参数

1、传递参数

字符串写法和对象写法

<!-- 跳转路由，并携带参数：to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${mes.id}&title=${mes.title}`">{
  
  {mes.title}}</router-link>
                
<!-- 跳转路由，并携带参数：to的对象写法 -->
<router-link :to="{
            path:'/home/message/detail',
            query:{
                   id:mes.id,
                   title:mes.title
     }
}">
    {
  
  {mes.title}}
</router-link>

2、接收参数

 <ul>
    <li>消息编号：{
  
  {$route.query.id}}</li>
    <li>消息标题：{
  
  {$route.query.title}}</li>
  </ul>

六、路由的params参数

1、配置路由：

申明接收使用params参数

最低0.47元/天解锁文章

200万优质内容无限畅学