16、Vue 路由

步骤:

1、安装
npm install vue-router --save

2、引入并实例化（main.js中）
import VueRouter from 'vue-router'

Vue.use(VueRouter);//官方插件都这样用

image.png

3、引入、创建组件（main.js中）
import Home from './components/Home.vue';
import News from './components/News.vue';

image.png

4、配置路由（main.js中）
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',component:Home},//默认跳转路由
]

image.png

5、//5、实例化VueRouter:（main.js中）
const router = new VueRouter({
routes//(或写成routes:routes)
})

image.png

6、挂载router（main.js中）

image.png

new Vue({
el: '#app',
//6、挂载router
router,
components: { App },
template: ''
})
7、将路由出口：（App.vue中）
首页
新闻
放在App.vue中

image.png

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'//引入vue实例
import App from './App'
//1、引入VueRouter
import VueRouter from 'vue-router'

import VueResource from 'Vue-resource'
//从'Vue-resource'中引入模块，并命名为'VueResource'
Vue.config.productionTip = false;
Vue.use(VueResource);//官方插件都这样用
//2、Vue.use(VueRouter);
Vue.use(VueRouter);

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

//4、配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',component:Home},//默认跳转路由
]
//5、实例化VueRouter:
const router = new VueRouter({
routes//(或写成routes:routes)
})
new Vue({
el: '#app',
//6、挂载router
router,
components: { App },
template: ''
})

//7、将路由出口：放在App.vue中

App.vue: