本文主要是介绍vue3 中vue-router,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 静态导入
import index from './../components/index.vue'
import notfound from './../components/notfound.vue'
import HelloWorld from './../components/HelloWorld.vue'
import parent from './../components/parent/index.vue'
import sonOne from './../components/parent/sonOne/index.vue'
import sonTwo from './../components/parent/sonTwo/index.vue'
import shop from './../components/shop//index.vue'
import shopTop from './../components/shop/shopTop/index.vue'
import shopFooter from './../components/shop/shopFooter/index.vue'
import shopMain from './../components/shop/shopMain/index.vue'
// 动态导入 => 路由懒加载
// const index = () => import('./../components/index.vue')
const routes = [{
path: '/',
component: index
},
{
path: "/index",
component: index
},
// 路由懒加载
// {
// path: "/index",
// component: () => import('./../components/index.vue')
// },
// props 用法
// {
// path: "/index",
// component: index,
// props: true,
// //即便是 props:true 本质上也还是通过 params 传参。
// // 只不过 props:true 时路由参数将自动被赋值到目标组件的 props 里。
// // 比如你这个组件里有个 props 叫 myId、路由参数里有个 /:myId,那么自动就赋上值了。
// },
{
// 动态路由
path: "/index/:id",
//参数以只能是数字
// path: "/index/:id(\\d+)",
// 参数可有可无(可以有多个参数)
// path: "/index/:id*",
// 参数可有可无 (但只能有一个参数)
// path: "/index/:id?",
// 可以有多个参数
// path: "/index/:id+",
component: HelloWorld,
beforeEnter: (to, from, next) => {
console.log(to, from);
next()
}
},
{
path: "/parent",
// // 别名
// alias: '/father',
// alias: ['/father', '/fuqing'],
component: parent,
children: [
{
path: "sonOne",
component: sonOne
}, {
path: "sonTwo",
component: sonTwo
},
]
},
// 命名路由 (多加了层嵌套)
{
path: '/shop:id',
component: shop,
children: [
{
path: 'main',
components: {
default: shopMain,
shopTop: shopTop,
shopMain: shopMain,
shopFooter: shopFooter,
},
props: {
default: true,
shopTop: true,
shopMain: false,
shopFooter: false,
}
}
]
},
{
path: "/:path(.*)",
component: notfound,
}
]
//$router相当于是路由对象的集合专注于全局 从哪个路由跳转到哪里去
// $route相当于是一个实例 是指当前活跃的路由对象
// this.$router.push()
// this.$router.push({
// path:"",
// query:{}
// replace:true
// })
// this.$router.push({
// path:"",
// params:{}
// replace:true
// })
// this.$router.replace()
// this.$router.go()
// this.$router.back() = this.$router.go(-1)
// this.$router.forword() = this.$router.go(1)
// <router-link :to="name" ></router-link>
// <router-link :to="{name:'user',params:{}}" ></router-link>
// {
// path:"/",
// 重定向
// redirect:'home',
// redirect: (to) => {
// console.log(to)
// return { path: "home" }
// }
// }
const router = createRouter({
routes: routes,
// history: createWebHashHistory(),
history: createWebHistory(),
})
console.log(router);
export default router
这篇关于vue3 中vue-router的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!