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>