Vue-router路由

路由：本质就是映射

前端路由：就是切换url地址，渲染不同的组件

Vue-Router基本使用

第一步：创建路由需要映射的组件，就是打算要显示的页面

第二步：通过createRouter创建路由对象，并且传入routes和history模式；

配置路由映射：组件和路径映射关系的routes数组

创建基于hash或者history的模式

import { createRouter ,createWebHashHistory} from "vue-router";
import Home from "../views/Home.vue"
import About from "../views/About.vue"

const router = createRouter({
  history: createWebHashHistory(),
  routes:[
    // 重定向默认路径
    {path:'/',redirect:'/home'},
    {path: "/home", component: Home},
    {path: "/about", component: About},

  ]
})

export default router

第三步：使用app注册路由对象(use方法)

import { createApp } from 'vue'
import router  from './router'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

第四步：路由使用：通过

<template>
  <div>
    app
    <router-link to="/home">Home页面</router-link>
    <router-link to="/about">Avout页面</router-link>
    <router-view></router-view>
  </div>
</template>
<script setup>

</script>
<style scoped>
  
</style>

路由的默认路径：

我们在routes中配置一个新映射：

path配置的是根路径 /

redirect是重定向，也就是我们将根路径重定向到组件的路径

import { createRouter ,createWebHashHistory} from "vue-router";
import Home from "../views/Home.vue"
import About from "../views/About.vue"

const router = createRouter({
  history: createWebHashHistory(),
  routes:[
    // 重定向默认路径
    {path:'/',redirect:'/home'},
    {path: "/home", component: Home},
    {path: "/about", component: About},

  ]
})

export default router

history模式：

import { createRouter, createWebHistory } from "vue-router"
const router = createRouter({
  history:creaetWebHistory
})

router-link

router-link事实上有很多属性可以配置：

to属性： 是一个字符串，或者是一个对象

  <router-link to="/home">Home页面</router-link>
  <router-link to="/about">Avout页面</router-link>

replace属性：

设置replace属性的话，当点击时，会调用router.replace() ，而不是router.push

active-class属性：

设置激活a元素后应用的class，默认时router-link-active

<style scoped>
  .router-link-active {
    color: red;
    font-size: 20px;
  }
</style>

也可以自己设置class：

<template>
  <div>
    app
    <router-link to="/home" active-class="active">Home页面</router-link>
    <router-link to="/about" active-class="active">Avout页面</router-link>
    <router-view></router-view>
  </div>
</template>

exact-active-class属性：

链接精准激活时，应用与渲染的的class，默认是router-link-exact-active

// 分包处理并命名 (也叫路由懒加载)
const Home = () => import(/* webpackChunkName:'home' */'../views/Home.vue')
const About = () =>import(/* webpackChunkName:'about' */"../views/About.vue")

    {path: "/user/:id", component: () => import("../views/User.vue")},

<template>
  <div>
   <h1> 我是User组件</h1>
   <!-- 再模板中获取id -->
   <h2>User:{{$route.params.id}}</h2>
  </div>
</template>
<script setup>
// 再setup中获取
  import { useRoute } from 'vue-router';
  const route = useRoute()
  console.log(route.params.id)

</script>
<style scoped>
  
</style>

    {path:"/:pathMatch(.*)",component:() =>import('../views/NotFound.vue')}