一、路由嵌套
(一)路由嵌套的定义
路由嵌套本质上就是在我们原有的路由基础上,添加了子路由去递进访问,比如在/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
卖苹果~
买香蕉~
卖雪梨~
export default {
name: "Food",
props: ['id']
}
4. 运行项目,执行npm run dev
我们可以看到,参数1已经传递过去了
image.png