vue路由学习笔记

路由

使用路由的步骤

1：安装vue-router插件 npm i vue-router

2：创建router文件夹，新建index.js文件，index.js中， 声明路由规则，创建路由对象，导出（暴露）路由

3：main.js中，导入路由, 挂载路由

4：使用路由，跳转至相应的路由组件

index.js

//导入静态函数
import {
   createRouter,createWebHistory} from 'vue-router'
//导入路由组件
import Home from '../components/Home'
import About from '../components/About'

//定义路由规则
const routes = [
    {
   
        //路由默认路径
        path:'/',
        redirect:'/home'
    },
    {
   
        path:'/home',
        component:Home
    },
    {
   
         path:'/about',
        component:About
    }
]

//创建路由器对象
const router = createRouter({
   
    history:createWebHistory()//history方式的路由
})

//暴露路由对象
export default router

main.js

//引入vue-router
import router from './router'

//使用VueRouter
createApp(App).use(router).mount('#app')

router-link的属性

• to属性：
  是一个字符串，或者是一个对象，通常是url
• replace属性：
  设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()[默认模式]；
• active-class属性：
  设置激活a元素后应用的class，默认是router-link-active
• exact-active-class属性：
  链接精准激活时，应用于渲染的 的 class，默认是router-link-exact-active；

如果想做到点击不同的导航,样式也跟着切换,可以在<router-link>标签上添加active-class=‘类名’

如果我们的导航很多,那我们就需要在每个<router-link>标签上添加active-class=‘类名’,很繁琐,其实我们也可以在创建router对象时进行设置linkActiveClass属性,而不需要在每个<router-link>设置:

//创建路由器对象
const router = createRouter({
   
    history:createWebHistory(),//history方式的路由
    linkActiveClass:'active类名'
})

配置路由的默认路径

{
      
  //路由默认路径
  path:'/',
  redirect:'/home'
}

注意:

1. 在实际开发中,我们会把组件分为两类, 一类是路由组件,一类是普通组件(功能组件), 我们会把普通组件放在components目录下, 而路由组件则放在views或者pages目录下
2. 通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由。this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同。

嵌套路由

使用children声明子路由规则，子路由的路径不要写/

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，