Vue之路由跳转

所谓的router就是动态的往根里面挂载组件，而不是手动挂载。

vue路由配置的步骤：

https://router.vuejs.org/

1.安装 

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


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

	import VueRouter from 'vue-router'

	Vue.use(VueRouter)


3、配置路由

	(1)、创建组件 引入组件

	(2)、定义路由  （建议复制）

		const routes = [
		  { path: '/home', component: Home },
		  { path: '/bar', component: News },
		  { path: '*', redirect: '/home' }   /*默认跳转路由*/
		]

	(3)、实例化VueRouter

		const router = new VueRouter({
		  routes // （缩写）相当于 routes: routes
		})

	(4)、挂载

			
	new Vue({
	  el: '#app',
	  router，
	  render: h => h(App)
	})


	(5)、根组件的模板里面放上这句话   <router-view></router-view>         

	(6)、路由跳转
	<router-link to="/foo">Go to Foo</router-link>
	<router-link to="/bar">Go to Bar</router-link>

下面我用代码来做详细讲解：

目录结构

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//导入并使用
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

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

//2.配置路由  注意，名字一定不能错
const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect: '/home' }//默认跳转路由
]

//3.实例化VueRouter  注意，名字一定不能错
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//4.挂载路由

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//5.根组件的模板里放上这句话  <router-view></router-view>

Home.vue

<template>
    <!-- 所有的内容要被根节点包含起来-->
    <div id="home">
        我是首页组件
        <br>
        
    </div>
</template>  

<script>

export default {
    data(){
        return {
            msg:'我是一个home组件',
            title:'今天 2019/2/21'
        }
    }
    
}
</script>

News.vue

<template>
 <!-- 所有的内容要被根节点包含起来-->
 <div id="news">
     我是一个新闻组件
     <br>
     

 </div>
</template>

<script>

export default {
 data(){
     return {
         msg:'我是一个news组件',
     }
 }
 
}
</script>

App.vue

<template>
  <div id="app">
    
    <router-link to="/home">Go to Home</router-link>
    <router-link to="/news">Go to News</router-link>
    
    <hr>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      msg:'你好vue'
    }
  }
  
}
</script>

<style>

</style>

最后在网页中呈现的效果如下图：
有关Vue路由跳转的步骤及方法我做的都应该很详细了，详情请参考官方文档： https://cn.vuejs.org/ ，若有任何疑问或是不解请在下方评论，谢谢。