14 Vue中的路由 以及默认路由跳转

1.安装

npm install vue-router --save / cnpm install vue-router --save

2.在main.js中引入并Vue.use(VueRouter)

//引入路由
import VueRouter from 'vue-router';
//使用VueRouter
Vue.use(VueRouter);

3.配置路由（main.js）

1.创建组件、引入组件

// 1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';

2.定义路由（建议复制）

// 2.配置路由（注意名字）
const routes = [
	{ path: '/home', component: Home },
	{ path: '/news', component: News }
]

3.实例化VueRouter

// 3.实例化VueRouter（注意名字）
const router = new VueRouter({
	routes 	//(缩写) 相当于 routes：routes
})

4.挂载

// 4.挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

5.根组件的模板里面放上：

<!-- 动态加载路由组件 -->
<router-view></router-view>

运行结果，会发现启动后，没有出现任何信息：

在访问路径后面加上home或者news,即（http://localhost:8080/#/home）或（http://localhost:8080/#/news）可访问：

4.路由跳转

基于上面的不足，我们可以采用路由跳转方式，进行点击跳转

<!-- 路由跳转 -->
<router-link to='/home'>首页</router-link>
<router-link to='/news'>新闻</router-link>

5. 重定向和别名，实现默认加载

const router = new VueRouter({
  routes: [
    { path: '*', redirect: '/home' }
  ]
})

最终完整代码：
main.js:

import Vue from 'vue';
import App from './App.vue';

//引入路由
import VueRouter from 'vue-router';
//使用VueRouter
Vue.use(VueRouter);

// 1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';

// 2.配置路由
const routes = [
	{ path: '/home', component: Home },
	{ path: '/news', component: News },
	{ path: '*', redirect: '/home' }
]

// 3.实例化VueRouter
const router = new VueRouter({
	routes 	//(缩写) 相当于 routes：routes
})

// 4.挂载路由
new Vue({
  el: '#app',
	router,
  render: h => h(App)
})

Home.vue:

<template>
	<div id="home">
		<h2>{{msg}}</h2>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '这是一个home组件！'
			}
		}
	}
</script>

<style>
</style>

News.vue:

<template>
	<div id="news">
		<h2>{{msg}}</h2>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '这是一个新闻组件！'
			}
		}
	}
</script>

<style>
</style>

App.vue:

<template>
	<div id="app">
		<!-- 路由跳转 -->
		<router-link to='/home'>首页</router-link>
		<router-link to='/news'>新闻</router-link>

		<!-- 动态加载路由组件 -->
		<router-view></router-view>

	</div>
</template>

<script>
	export default {
		name: 'app',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		}
	}
</script>

<style lang="scss">

</style>

运行结果如下图：

*参考链接：https://router.vuejs.org/