用vue写一个等级路由
时间: 2024-05-09 09:16:21 浏览: 35
首先,需要安装 `vue-router`,可以通过以下命令进行安装:
```
npm install vue-router --save
```
然后在需要使用路由的组件中引入路由:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
```
定义路由:
```javascript
const router = new Router({
routes: [
{
path: '/',
redirect: '/level1' // 默认跳转到一级路由
},
{
path: '/level1',
component: Level1
},
{
path: '/level2',
component: Level2
},
{
path: '/level3',
component: Level3
}
]
})
```
其中,`redirect` 表示默认路由,即第一次进入页面时跳转的路由。
最后,将路由实例注入到 Vue 实例中:
```javascript
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
完整代码如下:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Level1 from '@/components/Level1'
import Level2 from '@/components/Level2'
import Level3 from '@/components/Level3'
import App from '@/App'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: '/level1' // 默认跳转到一级路由
},
{
path: '/level1',
component: Level1
},
{
path: '/level2',
component: Level2
},
{
path: '/level3',
component: Level3
}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```