标签：index vue import vue3 components path 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

标签：index,vue,import,vue3,components,path,router
来源： https://www.cnblogs.com/panghu123/p/16687816.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。