VUE.JS-路由的基本使用、多级路由与路由的query参数

先创建router文件夹，并在其目录下创建index.js文件：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

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

在App.vue中实现路由切换：

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

其引入的组件About.vue:

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

<script>
	export default {
		name:'About'
	}
</script>

组件Home.vue:

<template>
	<h2>我是Home的内容</h2>
</template>

<script>
	export default {
		name:'Home'
	}
</script>

多级路由：

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

路由的query参数：

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