VUE路由安装和使用

1.第一步安装路由

vue2.x使用的是router@3.x" rel="nofollow"">`vue-router@3.x和vuex@3.x，vue3.x使用的是router@4.x" rel="nofollow"">vue-router@4.x和vuex@4.x`

npm install vue-router@4

2.配置路由

2.1第二步:在src下新建router文件夹并创建index.js文件.配置路由映射

//引入组件
import Home from "../components/Home.vue";
import About from "../components/About.vue";
import Hello from "../components/HelloWorld.vue"

//配置路由映射
const routes = [
  {
    //对应的路径
    path: '/home',
    //对应的组件
    component:Home
  },
  {
    path: '/about',
    component:About
  },
   {
    path: '/hello',
    component:Hello
  }
]

2.2 第三步: 创建路由对象

通过createRouter创建路由对象并传入routes和history模式

• createWebHistory 创建history路由模式

• createWebHashHistory 创建hash路由模式

• createMemoryHistory 创建基于内存的历史记录

import { createRouter,createWebHashHistory } from "vue-router";

//引入组件
import Home from "../components/Home.vue";
import About from "../components/About.vue";
import Hello from "../components/HelloWorld.vue"

//配置路由映射
const routes = [
  {
    //对应的路径
    path: '/home',
    //对应的组件
    component:Home
  },
  {
    path: '/about',
    component:About
  },
   {
    path: '/hello',
    component:Hello
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router;

2.3第四步:挂载到vue实例上

在main.js中引入并使用

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
createApp(App).use(router).mount('#app')

2.4第五步:使用路由

通过router-link和router-view

在app.vue中

<template>
  <router-link to="/home">home</router-link> |
  <router-link to="/about">about</router-link> |
  <router-link to="/hello">HelloWorld</router-link>

  <router-view></router-view>
</template>