命名路由（简化路由的跳转）

命名路由

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

2. 如何使用

   1. 给路由命名：

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

简化跳转：

<!--简化前，需要写完整的路径 -->
<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>

main.js

//引入Vue

import Vue from 'vue'

//引入App

import App from './App.vue'

//引入VueRouter

import VueRouter from 'vue-router'

//引入路由器

import router from './router'

//关闭Vue的生产提示

Vue.config.productionTip = false

//应用插件

Vue.use(VueRouter)

//创建vm

new Vue({

    el:'#app',

    render: h => h(App),

    router:router

})

App.vue

<template>

  <div>

    <div class="row">

      <Banner/>

    </div>

    <div class="row">

      <div class="col-xs-2 col-xs-offset-2">

        <div class="list-group">

          <!-- 原始html中我们使用a标签实现页面的跳转 -->

          <!-- <a class="list-group-item active" href="./about.html">About</a> -->

          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

          <!-- 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>

        </div>

      </div>

      <div class="col-xs-6">

        <div class="panel">

          <div class="panel-body">

            <!-- 指定组件的呈现位置 -->

            <router-view></router-view>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

  import Banner from './components/Banner'

  export default {

    name:'App',

    components:{Banner}

  }

</script>

router\index.js

// 该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router'

//引入组件

import About from '../pages/About'

import Home from '../pages/Home'

import News from '../pages/News'

import Message from '../pages/Message'

import Detail from '../pages/Detail'

//创建并暴露一个路由器

export default new VueRouter({

    routes:[

        {

            name:'guanyu',

            path:'/about',

            component:About

        },

        {

            path:'/home',

            component:Home,

            children:[

                {

                    path:'news',

                    component:News,

                },

                {

                    path:'message',

                    component:Message,

                    children:[

                        {

                            name:'xiangqing',

                            path:'detail',

                            component:Detail,

                        }

                    ]

                }

            ]

        }

    ]

})

pages\About.vue

<template>

    <h2>我是About的内容</h2>

</template>

<script>

    export default {

        name:'About',

        /* beforeDestroy() {

            console.log('About组件即将被销毁了')

        },*/

        /* mounted() {

            console.log('About组件挂载完毕了',this)

            window.aboutRoute = this.$route

            window.aboutRouter = this.$router

        },  */

    }

</script>

pages\Detail.vue

<template>

    <ul>

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

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

    </ul>

</template>

<script>

    export default {

        name:'Detail',

        mounted() {

            console.log(this.$route)

        },

    }

</script>

pages\Home.vue

<template>

    <div>

        <h2>Home组件内容</h2>

        <div>

            <ul class="nav nav-tabs">

                <li>

                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

                </li>

                <li>

                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>

                </li>

            </ul>

            <router-view></router-view>

        </div>

    </div>

</template>

<script>

    export default {

        name:'Home',

        /* beforeDestroy() {

            console.log('Home组件即将被销毁了')

        }, */

        /* mounted() {

            console.log('Home组件挂载完毕了',this)

            window.homeRoute = this.$route

            window.homeRouter = this.$router

        },  */

    }

</script>

pages\Message.vue

<template>

    <div>

        <ul>

            <li v-for="m in messageList" :key="m.id">

                <!-- 跳转路由并携带query参数，to的字符串写法 -->

                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>   -->

                <!-- 跳转路由并携带query参数，to的对象写法 -->

                <router-link :to="{

                    name:'xiangqing',

                    query:{

                        id:m.id,

                        title:m.title

                    }

                }">

                    {{m.title}}

                </router-link>

           

            </li>

        </ul>

        <hr>

        <router-view></router-view>

    </div>

</template>

<script>

    export default {

        name:'Message',

        data() {

            return {

                messageList:[

                    {id:'001',title:'消息001'},

                    {id:'002',title:'消息002'},

                    {id:'003',title:'消息003'}

                ]

            }

        },

    }

</script>

pages\News.vue

<template>

    <ul>

        <li>news001</li>

        <li>news002</li>

        <li>news003</li>

    </ul>

</template>

<script>

    export default {

        name:'News'

    }

</script>