Vue之路由简单使用

vue路由是vue的一个插件，这是vue路由文档的链接

1. 首先安装路由，npm install vue-router --save
2. 在main.js引入路由

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

3. 我引入两页面，注册到路由

const routes = [
  { path: '/home', component: Home },
  { path: '/Demo', component: Demo }
]

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

4. 将router注册到根组件上

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

5. 在App.vue的div上加上路由就可以了

下面是main.js代码

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

//引入两个界面
import Home from './components/Home.vue'
import Demo from './components/Demo.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  { path: '/home', component: Home },
  { path: '/Demo', component: Demo },
  // 默认指向Home组件
   { path: '*', redirect: '/home' }
]

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


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

下面是App.vue代码