0704-路由路由

99 阅读1分钟
// 3、创建了一个 类似于 插件的 路由实例
const router_app = createRouter({
    // 路由实例创建时提供的配置项
    history: createWebHistory(),
    routes,
    // strict: true,  // 严格模式打开,就是路由后边不能再有 /
    // sensitive: true
});

strict: true, // 严格模式打开,就是路由后边不能再有 /

sensitive: true 对大小写是否敏感

import{createRouter,createWebHistory} from "vue-router";
const routes = [
    {path:'/',name:'index', component:()=>import('./components/IndexPage.vue')},
    {path:'/user:user_id',name:'user',title:'用户页面',component:()=>import('./components/UserPage.vue')},
    {path:'/product:product_id([1-9]\d+)',name:'product',title:"产品页面",component:()=>import('./components/ProductPage.vue')},
    {path:'/test/:arg([1-9]\d+)',name:'test',title:'测试页面',component:()=>import('./components/TestPage.vue')},
    {path: '/:noPage(.*)*',name:'noPage',component:()=>import('./components/NoPage.vue') }
]
const RouterApp = createRouter({
    history:createWebHistory(),
    routes,
})
export default RouterApp

从main.js 到 route.js 是基本逻辑,现在对路由设置的IndexPage