vue嵌套路由传递参数_Vue——路由嵌套和参数传递

一、路由嵌套

(一)路由嵌套的定义

路由嵌套本质上就是在我们原有的路由基础上，添加了子路由去递进访问，比如在/main路由下新增了/login，那么我们就可以在路由到main的基础上，对login进行访问。

通过路由嵌套，我们可以更加规范化地对path进行定义

(二)开始实践一下路由嵌套

1. 新建一个空文件夹，并进行初始化

相关细节已在其他笔记中记载，此处只写命令

vue init webpack init

-- 在初始化的时候，我们选择自动install vue-router

# 安装 element-ui

npm i element-ui -S

# 安装依赖

npm install

# 安装 SASS 加载器

cnpm install sass-loader node-sass --save-dev

# 启动测试

npm run dev

2. 定义侧边栏组件，并应用ElementUI

在src目录下创建view目录，新增main组件

组件代码如下：

默认颜色

default-active="1"

class="el-menu-vertical-demo"

@open="handleOpen"

@close="handleClose">

商品列表

分组一

Food

Cloth

热门爆款

精选文章

设置

个人信息

退出登录

export default {

name: "Main",

methods: {

handleOpen(key, keyPath) {

console.log(key, keyPath);

},

handleClose(key, keyPath) {

console.log(key, keyPath);

}

}

}

3. 定义路由、App.vue、main.js

/ router / index文件

import Vue from 'vue'

import Router from 'vue-router'

import Main from "../view/Main";

Vue.use(Router)

export default new Router({

routes: [

{

path: '/main',

name: 'mainRouter',

component: Main

}

]

})

App.vue ↓

点击前往首页

export default {

name: 'App'

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

main.js ↓

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

Vue.use(router)

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: '

})

4. 创建Food、Cloth组件，用于路由嵌套使用

卖短袖~

卖长袖~

卖女装~

export default {

name: "Cloth"

}

Cloth组件↑

卖苹果~

买香蕉~

卖雪梨~

export default {

name: "Food"

}

Food组件↑

5. 为Food、Cloth定义嵌套路由

修改router / index文件，关键在于使用children属性

import Vue from 'vue'

import Router from 'vue-router'

import Main from "../view/Main";

import Food from "../view/Food";

import Cloth from "../view/Cloth";

Vue.use(Router)

export default new Router({

routes: [

{

path: '/main',

name: 'mainRouter',

component: Main,

children: [

{path: '/food',component: Food},

{path: '/cloth',component: Cloth}

]

}

]

})

6. 修改main组件，配置路由(即实际谁来调用这个路由)

将下面这部分

分组一

Food

Cloth

替换为

分组一

Food

Cloth

7. 启动项目

npm run dev

-- 实际上，不执行也行。因为我们一开始启动的时候已经执行过这条命令，后台一直会刷新我们的最新代码

效果如下：

image.png

二、参数传递

(一)概念

在实际开发中，我们往往需要对页面数据和服务器数据进行交互，比如用户登录的时候传递用户的参数到后台进行校验。下面我们将以上面的例子为基础，对参数传递进行描述。

(二)参数传递演示

1. 修改main.vue组件

或者说，你是通过哪个组件来使用path的，就改哪里

Food

这里有两个地方要注意：

通过v-bind绑定要跳转的组件，name要和路由中的name对应

v-bind:to可以换成 :to

2. 修改路由

在本案例中，即修改 router / index.js文件

主要是修改path路径和新增props: true

import Vue from 'vue'

import Router from 'vue-router'

import Main from "../view/Main";

import Food from "../view/Food";

import Cloth from "../view/Cloth";

Vue.use(Router)

export default new Router({

routes: [

{

path: '/main',

name: 'mainRouter',

component: Main,

children: [

{path: '/food/:id',component: Food,name: 'main-food',props:true},

{path: '/cloth',component: Cloth,name: 'main-cloth'}

]

}

]

})

3. 修改视图组件Food.vue

主要是script中新增props属性，template中展示id

卖苹果~

买香蕉~

卖雪梨~

{{id}}

export default {

name: "Food",

props: ['id']

}

4. 运行项目,执行npm run dev

我们可以看到，参数1已经传递过去了

image.png