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上加上路由就可以了

<router-view></router-view>

下面是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代码

<template>
  <div id="app">
  	 <!-- 点击两个链接跳转 -->
     <router-link to="/Home">首页</router-link>
    <router-link to="/Demo">示例</router-link>
   <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  
  data(){
    return
    }
  },
  components: {
  }
}
</script>

<style>
</style>