const routes路由默认写了两种写法,一个是正常的路由一个是懒加载路由
HomePage 为正常路由 页面不跳转过来的时候也会加载出来
about为懒加载路由,只有页面跳转的时候才会加载
redirect为重定向就是页面加载进来默认显示的页面,默认是路径为/的页面
路由模式分为历史模式和哈希模式
children为子路由也叫路由嵌套。假设做一个这样的页面,那么绿色的部分就可以设置为子路由
import { createRouter, createWebHashHistory } from "vue-router";
import HomePage from "../views/HomePage.vue";
const routes = [
{
path: "/",
name: "home",
component: HomePage, //首页
redirect: "/weilist", //重定向
children: [
{
path: "/weilist",
name: "WeiList",
component: () => import("../views/WeiList.vue"),
},
],
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
//路由守卫,比如判断用户是否登录
router.beforeEach((to, form,newxt)=>{//to从哪个页面来,form去哪个页面,next进行跳转,可以用to.path看路径
})
export default router;
- 路由跳转
<router-link to="/about">
关于我们
</router-link>
/***************************************/
<span @click='go'>跳转</span>
import {userRouter} from 'vue-router'
const router=userRouter()
const go=()=>{
router.push({
path: "/about",//跳转的路径
query: {//传的参数
username: this.formLabelAlign.username,
},
});
}
目标页面接收参数:this.$route.query.username
- 使用<router-view />来渲染路由页面