单页面应用 --- 在页面实现切换的时候不进行刷新
路由实现页面之间的切换跳转 每一个接口地址返回不同资源
每一个前端地址匹配显示不同的页面
1 安装 npm i vue-router@3 --save
2 创建页面组件 home.vue center.vue wode.vue
3 创建路由的js文件 src/router/index.js import Vue from "vue" import Router from "vue-router" Vue.use(Router) const routes = [ { path:"/", component:组件, } ] const router = new Router({ routes }) export default router
4 main.js import router from "./router" new Vue({ router }) 5 App.vue <!---显示---> <router-view></router-view> <!---切换---> <router-link to='/'></router-link>
router-link to='地址' :to='options' 对象写法 activeClass='修改 router-link-active' exactActiveClass='修改 router-link-exact-active' replace 一个切换模式 没有历史记录 一般会添加到嵌套的子路由 tag='改变标签' exact='将模糊匹配转化为精准匹配'
二、路由传参
1 动态路由传参
path每次都不一样
使用单个参数传递
router-link to='/detail/参数' routes=[ { path:'/detail/:name' } ] this.$route.params.name 获取参数 可以传递多个的参数
2 query传参
推荐时使 因为它的path不变
适用于多个参数传递
router-link :to='{path:"/info",query:{key1:value1,key2:value2...}}' {path:"/info"} this.$route.query
三、嵌套路由
{ path: '/center', component: Center, //router-view til: "中心", redirect: "/center/demo1", //重定向 children: [ { path: 'demo1', path:'名字' path:"/center/demo1" component: Demo1 }, { path: 'demo2', component: Demo2, }, { path: 'demo3', component: Demo3 } ] },
$route
params // 动态路由传参 query // query传参 path // 当前路由地址 name // 路由的名字 fullPath //完整地址 matched //面包屑 *** [{},{},{}] meta // 自定义信息 写在meta里面 til isExact hidden
命名视图
{ path: '/', components: { default: Home, //不设置名字就是默认的 footer: Footer, }, til: "首页", isExact: true },
编程式导航
this.$router === router router.push('/路径',{path:"",name:"",query:{}}) router.replace() replace 模式 router.history.go() -1 1 0 router.addRoutes() //重点 router.getRoutes() //获取路由
路由懒加载
必须使用的组件或者全局组件我们直接加载就可以了, 页面组件可以选择使用懒加载 const Wode = ()=> import("../views/wode.vue") 提高用户体验 骨架屏 -- 懒加载 banner