Vue学习17----配置路由及默认跳转

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

vue路由配置实现步骤：
1.安装
npm install vue-router --save / cnpm install vue-router --save

2、在main.js中，引入并 Vue.use(VueRouter)
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

3、在main.js中，配置路由
3.1、创建组件 引入组件
import Home from ‘./components/Home.vue’;
import News from ‘./components/News.vue’;
3.2、定义路由 （建议复制s）
const routes = [
{ path: ‘/foo’, component: Foo },
{ path: ‘/bar’, component: Bar },
{ path: ‘*’, redirect: ‘/home’ } /默认跳转路由/
]

3、在main.js中，实例化VueRouter
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})

4、在main.js中，挂载

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

5 、在App.vue中，根组件的模板里面放上这句话（显示子路由的地方）

6、在App.vue中，路由跳转

 Go to Foo
 Go to Bar

下面是一个例子实现
效果图：

项目结构：

main.js中配置路由
App.vue中实现跳转
Home.vue和News.vue是两个子组件
下面贴出源代码：
main.js

// https://router.vuejs.org/zh/
//
// vue路由配置：
// 1.安装
// npm install vue-router  --save   / cnpm install vue-router  --save
//
// 2、在main.js中，引入并 Vue.use(VueRouter)
// import VueRouter from 'vue-router'
// Vue.use(VueRouter)
//
// 3、在main.js中，配置路由
// 3.1、创建组件 引入组件
// import Home from './components/Home.vue';
// import News from './components/News.vue';
// 3.2、定义路由  （建议复制s）
// const routes = [
//   { path: '/foo', component: Foo },
//   { path: '/bar', component: Bar },
//   { path: '*', redirect: '/home' }   /*默认跳转路由*/
// ]
//
// 3、在main.js中，实例化VueRouter
// const router = new VueRouter({
//   routes // （缩写）相当于 routes: routes
// })
//
// 4、在main.js中，挂载
//
// new Vue({
//   el: '#app',
//   router，
//   render: h => h(App)
// })
//
// 5 、在App.vue中，根组件的模板里面放上这句话
// 
//
//
// 6、在App.vue中，路由跳转
// Go to Foo
// Go to Bar

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

import VueRouter from 'vue-router';
Vue.use(VueRouter);


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


const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },

  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

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


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


//5  放在 App.vue

App.vue

Home.vue

News.vue

源码下载：

vuedemo17
https://download.csdn.net/download/zhaihaohao1/11112029