Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

# Vue 路由
# 1.理解：一个路由(toute)就是一组映射关系（key-value），多个路由需要路由器(router)进行管理
# 2.前端路由：key是路径，value是组件
# 3.vue-router安装
#     注意：vue-router4只能在vue3中使用、vue-router3才能用在vue2中
    npm i vue-router@3
# 4.基本使用
    #main.js
    import Vue from 'vue'
    import App from './App.vue'
    // 引入路由
    import VueRouter from 'vue-router'
    // 引入自己配置的路由
    import router from './router'

    Vue.config.productionTip = false;
    // use它
    Vue.use(VueRouter);

    new Vue({
      render: h => h(App),
      router: router // 加载它
    }).$mount('#app');
    # ./router/index.js  自己配置路由
    import VueRouter from 'vue-router'
    import Home from '../components/Home'
    import About from '../components/About'

    // 创建一个路由器
    export default new VueRouter({
        routes:[
        {
            path:'/about',
            component: About
        },
        {
            path:'/home',
            component: Home
        }
        ]
    });
# 5.实现切换(active-class可配置高亮样式)
    <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
# 6.指定展示路由组件位置
    <router-view></router-view>
# 7.几个注意点
#    .路由组件通常存放在pages文件夹，一般组件通常放在conmponents文件夹。
#    .通过切换，“隐藏”了的路由，默认是被销毁掉的，需要的时候再去挂载。
#    .每个组件都有自己的$route属性，里边存储着自己的路由信息。
#    .整个应用只有一个router，可以通过路由组件$router属性获取到。
# 8.路由的query参数
#    .传递参数
        <!-- 跳转并携带query参数，to字段的字符串写法 -->
        <router-link :to="/home/message/detail?id=666&title=hello">跳转</router-link>
        <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
        <!-- 跳转并携带query参数，to字段的对象写法 -->
        <router-link :to="{
            path:'/home/message/detail',
            query:{
                id:m.id,
                title:m.title
            }
        }">跳转</router-link>
#    .接收参数：
        $route.query.id
        $route.query.title
# 9.命名路由
#    .作用：可以简化路由的跳转
#    .给路由命名
        export default new VueRouter({
        routes:[
            {
                name:'guanyu', // 命名路由
                path:'/about', // 路劲
                component: About
            },
            {
                path:'/home',
                component: Home,
                children:[
                {
                    path:'messages',
                    component: Messages,
                    children:[
                        {
                            name: 'xiangqing',
                            path: 'message',
                            component: MessageInfo
                        }
                    ]
                },
                {
                    path:'news',
                    component: News
                }
                ]
            }
            ]
        });
#    .简化跳转
        <!-- 简化前，需要写完整的路劲 -->
        <router-link to="/home/test/welcome">跳转</router-link>
        <!-- 简化后，直接名字跳转 -->
        <router-link :to="{name:'hello'}">跳转</router-link>
        <!-- 简化写法，配合query传参 -->
        <router-link :to="{
            name:'hello',
            query:{id: '666', title:'hello'}
        }">跳转</router-link>
# 10.路由的params传参
#    .配置路由接受params参数
        export default new VueRouter({
            routes:[
            {
                name:'guanyu', // 命名路由
                path:'/about', // 路劲
                component: About
            },
            {
                path:'/home',
                component: Home,
                children:[
                {
                    path:'messages',
                    component: Messages,
                    children:[
                        {
                            name: 'xiangqing',
                            path: 'message/:id/:title', // params传参
                            component: MessageInfo
                        }
                    ]
                },
                {
                    path:'news',
                    component: News
                }
                ]
            }
            ]
        });
#    .传递参数（特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！）
        <ul>
            <!-- <li v-for="(m, index) in messageList" :key="index"> <router-link :to="`/home/messages/message/${m.id}/${m.title}`">{{m.title}}</router-link> </li> -->
            <li v-for="(m, index) in messageList" :key="index"> <router-link :to="{
                name: 'xiangqing',  // params 传参只能作用在命名路由上
                params:{
                    id: m.id,
                    title: m.title
                }
            }">{{m.title}}</router-link> </li>
        </ul>
#    .接受参数
        $route.params.id
        $route.params.title