Vue之路由配置安装以及跳转

https://router.vuejs.org/zh/

vue路由配置：

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、创建组件引入组件

import Home from './components/Home.vue';
import News from './components/News.vue';

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

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

5 、根组件的模板里面放上这句话 (例APP.Vue)

            <router-view></router-view>

6、路由跳转 (例APP.Vue)

	<router-link to="/foo">Go to Foo</router-link>
	 <router-link to="/bar">Go to Bar</router-link>

如下
App.vue

<template>
  <div id="app"> 
    <router-link to='/home'>首页</router-link>
    <router-link to='/news'>新闻</router-link>
   <router-view></router-view>
  </div>
</template>

main.js

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

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、挂载路由

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue

在这里插入图片描述