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组件
组件代码如下：
<template>
<div>
<el-row class="tac">
<el-col :span="4">
<h5>默认颜色</h5>
<el-menu
default-active="1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>商品列表</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">Food</el-menu-item>
<el-menu-item index="1-2">Cloth</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">热门爆款</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">精选文章</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">设置</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="12">
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<!--在这里展示视图-->
<router-view />
</el-main>
</el-container>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "Main",
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style scoped>
</style>
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 ↓
<template>
<div id="app">
<router-link to="/main">点击前往首页</router-link>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#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;
}
</style>
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: '<div><App/><router-view/></div>'
})
4. 创建Food、Cloth组件，用于路由嵌套使用
<template>
<div>
<h1>卖短袖~</h1>
<h1>卖长袖~</h1>
<h1>卖女装~</h1>
</div>
</template>
<script>
export default {
name: "Cloth"
}
</script>
<style scoped>
</style>
Cloth组件↑
<template>
<div>
<h1>卖苹果~</h1>
<h1>买香蕉~</h1>
<h1>卖雪梨~</h1>
</div>
</template>
<script>
export default {
name: "Food"
}
</script>
<style scoped>
</style>
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组件，配置路由（即实际谁来调用这个路由）
将下面这部分
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">Food</el-menu-item>
<el-menu-item index="1-2">Cloth</el-menu-item>
</el-menu-item-group>
替换为
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">
<router-link to="/main/food">Food</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/main/cloth">Cloth</router-link>
</el-menu-item>
</el-menu-item-group>
7. 启动项目
npm run dev
-- 实际上，不执行也行。因为我们一开始启动的时候已经执行过这条命令，后台一直会刷新我们的最新代码
效果如下：
二、参数传递
（一）概念
在实际开发中，我们往往需要对页面数据和服务器数据进行交互，比如用户登录的时候传递用户的参数到后台进行校验。下面我们将以上面的例子为基础，对参数传递进行描述。
（二）参数传递演示
1. 修改main.vue组件
或者说，你是通过哪个组件来使用path的，就改哪里
<el-menu-item index="1-1">
<router-link v-bind:to="{name:'main-food' ,params:{id: 1}}" >Food</router-link>
</el-menu-item>
这里有两个地方要注意：
- 通过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
<template>
<div>
<h1>卖苹果~</h1>
<h1>买香蕉~</h1>
<h1>卖雪梨~</h1>
<div>{{id}}</div>
</div>
</template>
<script>
export default {
name: "Food",
props: ['id']
}
</script>
<style scoped>
</style>
4. 运行项目,执行npm run dev
我们可以看到，参数1已经传递过去了
