命名路由

作用:用于简化路由的跳转(简化path和url的编写)

使用流程:

1.首先给路由添加name属性(给指定路由添加一个名字)

// 一级路由
routes:[
    {   
        //设置管理路由:Home
        path:'/home',
        component: Home,
        
        // 二级路由(children属性)
        children:[//通过children配置子级路由
            {
                // 使用二级路由过后的path不需要再加上"/"
                path:'message',
                component: Message,

                // 使用三级路由
                children:[
                    {
                        // 给这个三级路由命名未"xiangqing"
                        name : 'xiangqing',
                        path:'detail',
                        component: Detail,
                    }
                ]
            },
        ]
    },
]

2.简化跳转

前提是你的to指向必须是使用对象式,不能是字符串式

<!--简化前，需要写完整的路径(三级路由十分的繁琐) -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转(三级路由直接调用名字很快捷) -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
   :to="{
      name:'hello',
      query:{
         id:666,
            title:'你好'
      }
   }"
>跳转</router-link>

案例代码展示:

router-Index.js

// 这里配置路由(创建整个应用页面的路由器)

// 首先引入路由
import VueRouter from "vue-router";

// 引入各个组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

// 创建并向外暴露路由器
export default new VueRouter({
    // 一级路由
    routes:[
        {   
            //设置管理路由:About
            path:'/about',
            component: About
        },
        {   
            //设置管理路由:Home
            path:'/home',
            component: Home,
            
            // 二级路由(children属性)
            children:[//通过children配置子级路由
                {
                    // 使用二级路由过后的path不需要再加上"/"
                    path:'message',
                    component: Message,

                    // 使用三级路由
                    children:[
                        {
                            // 给这个三级路由命名未"xiangqing"
                            name : 'xiangqing',
                            path:'detail',
                            component: Detail,
                        }
                    ]
                },
                {
                    // 使用二级路由过后的path不需要再加上"/"
                    path:'news',
                    component: News,
                }
            ]
        },

    ]
})

Message组件(调用路由):

<template>
    <div>
        <ul>
            <li  v-for="m in messageList" :key="m.id">
                <!-- 这里使用常规的方法然url携带query[与ajax里面的query参数一致]参数 -->
                <!-- query参数是用于携带url信息的 -->
                <!-- 跳转路由并携带query参数 -->
                <!-- 使用ES6的模板字符串``携带数据即可(${需要携带的数据}) -->

                <!-- 方法一[to的字符串写法]:比较笨重,不推荐 -->
                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

                <!-- 方法二[to的对象写法]:使用对象的形式携带数据,简洁推荐 -->
                <router-link :to="{
                    // 使用路由的名字来调用路由更加简单
                    name : 'xiangqing',
                    // path: '/home/message/detail',
                    query: {
                        id: m.id,
                        title: m.title},
                    }"
                >{{m.title}}</router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name : 'News',
        data() {
            return {
                messageList : [
                    {id:'001',title:'消息001'},
                    {id:'002',title:'消息002'},
                    {id:'003',title:'消息003'},
                ]
            }
        },
    }
</script>

结果展示:

params参数

这里的params参数与query参数也是非常的相似,都是用于给路由传递参数的,但是相较于query参数,params参数使用起来流程更为繁杂,但是给to属性(url)编写携带数据却更为简洁

使用流程如下:

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

{
    name:'do',
    path:'demo/:id/:title', //使用占位符声明接收params参数
    component:Detail
 }

2. 传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/demo/666/你好阿!`">跳转</router-link>
               
<!-- 跳转并携带params参数，to的对象写法 -->
<!-- 使用对象写法一定要用name属性去指向路由,不能使用path属性 -->
<router-link 
  :to="{
     name:'do',
     params:{
        id:666,
           title:'你好阿!'
     }
  }"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3. 接收参数：
$route.params.id
$route.params.title

这样就相当于给path的请求者发送了一个query对象，里面包含着：id：666，title：你好阿！

案例实践:

除去main.js和其他无关紧要的组件[与上一个案例:多级路由的使用一致]
要求：消息组件下还有一个三级路由，管理消息的发放

router-index.js

// 这里配置路由(创建整个应用页面的路由器)

// 首先引入路由
import VueRouter from "vue-router";

// 引入各个组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

// 创建并向外暴露路由器
export default new VueRouter({
    // 一级路由
    routes:[
        {   
            //设置管理路由:About
            path:'/about',
            component: About
        },
        {   
            //设置管理路由:Home
            path:'/home',
            component: Home,
            
            // 二级路由(children属性)
            children:[//通过children配置子级路由
                {
                    // 使用二级路由过后的path不需要再加上"/"
                    path:'message',
                    component: Message,

                    // 使用三级路由
                    children:[
                        {
                            // 给这个三级路由命名未"xiangqing"
                            name : 'xiangqing',
                            //后面两个(/:id/:title)为params的占位符
                            // 一定要设置,否者会接收不到参数
                            path:'detail/:id/:title',
                            component: Detail,
                        }
                    ]
                },
                {
                    // 使用二级路由过后的path不需要再加上"/"
                    path:'news',
                    component: News,
                }
            ]
        },

    ]
})

Message组件(除去css样式)

<template>
    <div>
        <ul>
            <li  v-for="m in messageList" :key="m.id">
                <!-- 这里使用常规的方法然url携带params[与ajax里面的params参数一致]参数 -->
                <!-- params参数是用于携带url信息的 -->
                <!-- 跳转路由并携带params参数 -->
                <!-- 使用ES6的模板字符串``携带数据即可(${需要携带的数据}) -->

                <!-- 方法一[to的字符串写法]:比较笨重,不推荐 -->
                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

                <!-- 方法二[to的对象写法]:使用对象的形式携带数据,简洁推荐 -->
                <router-link :to="{
                    //使用params阐述传递数据必须使用 name来指定路由,否者会报错
                    name : 'xiangqing',
                    params: {
                        id: m.id,
                        title: m.title},
                    }"
                >{{m.title}}</router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name : 'News',
        data() {
            return {
                messageList : [
                    {id:'001',title:'消息001'},
                    {id:'002',title:'消息002'},
                    {id:'003',title:'消息003'},
                ]
            }
        },
    }
</script>

Detail组件(三级路由,由Message组件管理)

<template>
    <ul>
        <!-- 输出本地route上的params身上的指定参数即可 -->
        <li>消息编号:{{this.$route.params.id}}</li>
        <li>消息标题:{{this.$route.params.title}}</li>
    </ul>
</template>

<script>
    export default {
        name : 'Detail',
        mounted(){
            // 输出本地的route发现里面多了一个params参数
            // params参数里面携带者url传过来的数据
            console.log(this.$route);
        }   
    }
</script>