vue-router 4.0 的简单使用

1. 安装

• npm install vue-router@4.0.0-beta.13
  

• yarn add vue-router@4.0.0-beta.13
  

2. 使用

• 使用History

  import {createRouter, createWebHistory} from 'vue-router'
  import Home from '../views/Home.vue'
  
  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  export default router
  

• 不使用History

  import {createRouter, createWebHashHistory} from 'vue-router'
  import Home from '../views/Home.vue'
  
  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
  
  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })
  
  export default router
  

• main.js 引入

  import {createApp} from 'vue'
  import router from './router'
  import App from './App.vue'
  import './index.css'
  
  const app = createApp(App);
  app.use(router)
  app.mount('#app')