vue多级路由demo
时间: 2023-10-11 19:06:31 浏览: 87
你可以参考这个GitHub链接 [https://github.com/Nigular/vue-dynamic-router](https://github.com/Nigular/vue-dynamic-router) 来查看一个完整的Vue多级路由的demo。在这个demo中,路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。通过切换,“隐藏”了的路由组件默认是被销毁掉的,需要的时候再去挂载。每个组件都有自己的$route属性,里面存储着自己的路由信息。整个应用只有一个router,可以通过组件的$router属性获取到。
相关问题
vue多级路由的用法
Vue多级路由是指在Vue项目中,可以通过嵌套路由的方式来实现对多个组件的分层管理和路由跳转。
具体用法如下:
1. 在Vue项目中,使用Vue Router来进行路由管理,创建一个Router实例。
```javascript
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'home',
component: Home,
children: [
{
path: 'page1',
name: 'page1',
component: Page1
},
{
path: 'page2',
name: 'page2',
component: Page2
}
]
}
]
})
```
2. 在Router实例的routes属性中,使用children属性来嵌套子路由,即多级路由。
3. 在Vue组件中,通过router-link组件来实现路由跳转。
```html
<router-link to="/home/page1">Page1</router-link>
<router-link to="/home/page2">Page2</router-link>
```
4. 在Vue组件中,使用router-view组件来展示当前路由对应的组件。
```html
<router-view></router-view>
```
通过以上步骤,就可以在Vue项目中实现多级路由的用法了。
vue多级路由及重定向
Vue的多级路由和重定向是非常常见的应用场景,下面我简单介绍一下如何实现。
首先我们需要在`router/index.js`中定义多级路由,例如:
```
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Page1 from '@/components/Page1'
import Page2 from '@/components/Page2'
import Page3 from '@/components/Page3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/page1',
name: 'Page1',
component: Page1,
children: [
{
path: 'page2',
name: 'Page2',
component: Page2
},
{
path: 'page3',
name: 'Page3',
component: Page3
}
]
}
]
})
```
上述代码定义了一个多级路由,`/page1`是一级路由,`/page1/page2`和`/page1/page3`是二级路由。
接下来我们需要实现重定向功能,例如将`/`重定向到`/home`:
```
export default new Router({
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/page1',
name: 'Page1',
component: Page1,
children: [
{
path: 'page2',
name: 'Page2',
component: Page2
},
{
path: 'page3',
name: 'Page3',
component: Page3
}
]
}
]
})
```
上述代码中,我们定义了一个重定向路由,将`/`重定向到`/home`。
以上就是Vue多级路由和重定向的简单实现。
阅读全文