命名路由

App.vue

<script setup></script><template>  <div>    <h1>Hello App!</h1>      <!--应用 router-link 组件进行导航 -->      <!--通过传递 `to` 来指定链接 -->      <!--`<router-link>` 将出现一个带有正确 `href` 属性的 `<a>` 标签-->      <router-link to="/">Go to Home</router-link>      <p>---</p>      <router-link to="/about">Go to About</router-link>       <p>---</p>      <router-link to="/user/56">Go to User</router-link>    <p>---</p><!--    <router-link to="/news/56">Go to User</router-link>-->    <router-link :to="{name:'news',params:{id:56}}">Go to News </router-link>    <p>---</p>    <router-link to="/parent">Go to Parent</router-link>    <p>---</p>    <router-link to="/page">Go to Page</router-link>    <!-- 路由进口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view></router-view>  </div></template>

indev.js

// 1. 定义路由组件.// 也能够从其余文件导入import Home from "../views/Home.vue";import About from "../views/About.vue";import User from "../views/User.vue";import NotFound from "../views/NotFound.vue";import News from "../views/News.vue";import Parent from "../views/Parent.vue";import Styleone from "../views/Styleone.vue";import Styletwo from "../views/Styletwo.vue";import Page from "../views/Page.vue";import {createRouter, createWebHashHistory} from "vue-router";// 2. 定义一些路由// 每个路由都须要映射到一个组件。// 咱们前面再探讨嵌套路由。const routes = [    { path: '/', component: Home },    { path: '/about', component: About },    { path: '/user/:id', component: User },    {        name: "news",        //path: '/news/:id(\\d+)',//正则匹配        // path: '/news/:id+',//多个参数        //path: '/news/:id+',//参数可有可无        //path: '/news/:id*',//参数可反复叠加        path: '/news/:id?',//参数不可反复叠加        component: News    },    {        path: '/:path(.*)',        component: NotFound    },//应用正则，匹配任意path    {        path: "/parent",        component: Parent,        children: [            {                path: "styleone",                component: Styleone            },            {                path: "styletwo",                component: Styletwo            }        ]    },    {        path: "/page",        component: Page    }]// 3. 创立路由实例并传递 `routes` 配置// 你能够在这里输出更多的配置，但咱们在这里// 临时放弃简略const router = createRouter({    // 4. 外部提供了 history 模式的实现。为了简略起见，咱们在这里应用 hash 模式。    history: createWebHashHistory(),    routes, // `routes: routes` 的缩写})export default router

New.vue

<template>  <div> News </div></template><script>export default {  name: "News"}</script><style scoped></style>

命名视图

App.vue

<script setup></script><template>  <div>    <h1>Hello App!</h1>      <!--应用 router-link 组件进行导航 -->      <!--通过传递 `to` 来指定链接 -->      <!--`<router-link>` 将出现一个带有正确 `href` 属性的 `<a>` 标签-->      <router-view name="ShopTop"></router-view>      <router-view name="ShopMain"></router-view>      <router-view name="ShopFooter"></router-view>      <router-link to="/">Go to Home</router-link>      <p>---</p>      <router-link to="/about">Go to About</router-link>       <p>---</p>      <router-link to="/user/56">Go to User</router-link>    <p>---</p><!--    <router-link to="/news/56">Go to User</router-link>-->    <router-link :to="{name:'news',params:{id:56}}">Go to News </router-link>    <p>---</p>    <router-link to="/parent">Go to Parent</router-link>    <p>---</p>    <router-link to="/page">Go to Page</router-link>    <!-- 路由进口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view></router-view>  </div></template>

index.js

// 1. 定义路由组件.// 也能够从其余文件导入import Home from "../views/Home.vue";import About from "../views/About.vue";import User from "../views/User.vue";import NotFound from "../views/NotFound.vue";import News from "../views/News.vue";import Parent from "../views/Parent.vue";import Styleone from "../views/Styleone.vue";import Styletwo from "../views/Styletwo.vue";import Page from "../views/Page.vue";import ShopTop from "../views/ShopTop.vue";import ShopMain from "../views/ShopMain.vue";import ShopFooter from "../views/ShopFooter.vue";import {createRouter, createWebHashHistory} from "vue-router";// 2. 定义一些路由// 每个路由都须要映射到一个组件。// 咱们前面再探讨嵌套路由。const routes = [    { path: '/', component: Home },    { path: '/about', component: About },    { path: '/user/:id', component: User },    {        name: "news",        //path: '/news/:id(\\d+)',//正则匹配        // path: '/news/:id+',//多个参数        //path: '/news/:id+',//参数可有可无        //path: '/news/:id*',//参数可反复叠加        path: '/news/:id?',//参数不可反复叠加        component: News    },    {        path: '/:path(.*)',        component: NotFound    },//应用正则，匹配任意path    {        path: "/parent",        component: Parent,        children: [            {                path: "styleone",                component: Styleone            },            {                path: "styletwo",                component: Styletwo            }        ]    },    {        path: "/page",        component: Page    },    {      path: "/shop",      components: {          default: ShopMain,          ShopTop:ShopTop,          ShopFooter:ShopFooter,          ShopMain:ShopMain      }    }]// 3. 创立路由实例并传递 `routes` 配置// 你能够在这里输出更多的配置，但咱们在这里// 临时放弃简略const router = createRouter({    // 4. 外部提供了 history 模式的实现。为了简略起见，咱们在这里应用 hash 模式。    history: createWebHashHistory(),    routes, // `routes: routes` 的缩写})export default router