Vue基础之路由

1.安装
npm install vue-router --save
cnpm install vue-router --save
2.引入并Vue.use(VueRouter)【main.js中】
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
3配置路由

import VueRouter from 'vue-router';
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.挂载vueRouter*/
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});
/*5.<router-view></router-view>放在根组件app.vue里*/

AppVue中

		<router-link to="/home">首页</router-link>
		<router-link to="/news">新闻</router-link>
		<router-view></router-view>