VUE router3 路由搭建

文章目录

一、下载/安装

1.CDN方式

https://unpkg.com/vue-router@3/dist/vue-router.js

        http:// Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@3.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。

在 Vue 后面加载 vue-router,它会自动安装的:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

2.NPM方式

        在项目根目录打开命令行(windows键+R打开

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,这里是一个使用Vue 3和Vite搭建的多级路由示例: 首先,我们需要安装Vue Router: ``` npm install vue-router@4.0.0-0 ``` 接下来,我们创建一个router.js文件,在其中定义我们的路由: ```javascript import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/', component: () => import('./views/Home.vue') }, { path: '/about', component: () => import('./views/About.vue') }, { path: '/users', component: () => import('./views/Users.vue'), children: [ { path: '', component: () => import('./views/UsersList.vue') }, { path: ':id', component: () => import('./views/UsersDetail.vue') } ] } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` 这里我们定义了三个路由,分别是根路径'/'、'/about'和'/users'。其中,'/users'是一个嵌套路由,包含了'/users'和'/users/:id'两个子路由。 接着,在我们的main.js文件中,我们需要将router引入,并将其挂载到Vue实例上: ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 最后,我们需要在App.vue中加入\<router-view>标签,用于渲染路由组件: ```html <template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/users">Users</router-link> </nav> <router-view></router-view> </div> </template> ``` 这样,我们就完成了一个简单的多级路由示例。访问'/users'路径时,将会渲染Users.vue组件,并在其内部渲染UsersList.vue组件;访问'/users/:id'路径时,将会渲染Users.vue组件,并在其内部渲染UsersDetail.vue组件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值