Vue Router应用方法详解

<script>
import About from "./components/About.vue";
import Home from "./components/Home.vue";
import NotFound from "./components/Not Found.vue";
const routes = {
  //路由默认跳转到Home组件
  '/': Home,
  '/about': About
}
export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    //计算属性的方法，响应式的，缓存
    currentView() {
      //过滤#，匹配路由
      return routes[this.currentPath.slice(1) || '/' ] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
      //只要window变化了就，把当前的路径给App组件下的属性this.currentPath
      this.currentPath = window.location.hash
    })
  }
}
</script>
<template>
  <a href="#/" rel="external nofollow" >Home</a> |
  <a href="#/about" rel="external nofollow" >About</a> |
  <a href="#/non-existent-path" rel="external nofollow" >Broken Link</a>
  <br>
  <component :is="currentView" />
</template>

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import './assets/main.css'
//关闭vue的生产提示
Vue.config.productionTip = false
//使用路由器插件
Vue.use(VueRouter)
new Vue({
  render: (h) => h(App),
}).$mount('#app')

import VueRouter from "vue-router";
import Home from "../components/Home";
import About from "../components/About";
import NotFound from "../components/Not Found";
//创建路由器并暴露
export default new VueRouter({
    //多个路由
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/Home',
            component:Home
        }
    ]
})

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

<template>
<div>
  <h1>Router Demo</h1>
  <router-link to="/home">Home</router-link>||
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>
</template>