路由
使用路由的步骤
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'
}
注意:
- 在实际开发中,我们会把组件分为两类, 一类是路由组件,一类是普通组件(功能组件), 我们会把普通组件放在components目录下, 而路由组件则放在views或者pages目录下
- 通过调用
app.use(router)
,我们可以在任意组件中以this.$router
的形式访问它,并且以this.$route
的形式访问当前路由。this.$router
与直接使用通过createRouter
创建的router
实例完全相同。
嵌套路由
使用children声明子路由规则,子路由的路径不要写/
路由懒加载
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,