vue3 中vue-router

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！