Vue-路由

一、什么是路由？

这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。

传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，你必须使用vue-router来进行管理。

二、路由的用法

1.安装插件

终端输入： cnpm i vue-router -D

2.配置

配置路由,一般路由需要单独写在一个文件里面

router.js

// 引入路由插件
import {
    createRouter, createWebHashHistory } from 'vue-router'
// 引入组件
import Home from "./pages/home.vue"
import List from "./pages/list.vue"


const router = createRouter({
    // 创建路由
    history: createWebHashHistory(), // 指定路由模式
    routes: [ // 路由路径的配置
        {
   
            path:"/", // /是默认显示的路由
            name:"home", // 路由名称
            component: Home, // 路由显示组件
        },
        {
   
            path: "/list",
            name: "list",
            component: List
        }
      ]
})
export default router;

main.js

import {
    createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router" // 引入路由配置模块

createApp(App)
// // 注入vue-router实例，注入后vue的实例就有vue-router的组件和方法，还有一个$router的路由对象
.use(router) 
.mount('#app')

App.vue

路由组件

跳转页面的

<script>
</script>

<template>
  <div class="con">
  <!-- router-link类似a标签，可以调整到路由的path路径对应的组件 -->
	<router-link class="link" to="/">home</router-link>
  <router-link class="link" to="/list">list</router-link>

  <!-- 路由组件显示在router-view 组件里面 -->
  <router-view></router-view>
</div>
</template>


<style scoped>
  .link{
   
    border: 1px solid gray;
    padding: 10px;
    margin: 5px;
    text-decoration: none;
  }
  .con{
   
    padding: 5px;
  }
</style>

404路由配置

注意：需要写在最后

{
   
            // 匹配所有路由的方式,路由是从上往下开始匹配。一般用于404页面的配置(捕获没有的路由)。