vue-router使用入门
2024-10-07 20:50:53
安装及基本配置
# 安装
npm install vue-router
# 使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new Router({
routes: [
{
path: '/',
component: Index
},
{
path: '/about',
component: About
},
{
path: '/login',
component: Login
}
]
})
传参和参数获取
属性传参
# 路由
{
path: 'info/:name',
...
}
# 参数配置
<router-link to="/info/张三">张三</router-link>
# 获取
{{$route.params.name}} // 张三
哈希传参
# 路由
{
path: 'info',
...
}
# 参数配置
<router-link to="/info?name=李四&age=23">关于</router-link>
# 获取
{{$route.params.name}} // 李四 23
子路由
在路由中嵌套children，实现子路由配置， 子路由必须配置专属的router-view，用于页面渲染。
{
path: '/profile',
component: Profile,
children: [
{
path: 'info/:name',
components: {
asideContent: Infos
}
},
{
path: 'star',
components: {
asideContent: Star
}
}
]
}
手动访问和传参
路由配置：
{
path: '/logout/:name',
name: 'logout', // 在手动跳转的路由中使用
component: Logout
}
模板配置：
# 这里click方法不能写在a标签上面
<li @click="logout">
<a href="javascript:;">手动退出</a>
</li>
控制器配置：
<script>
export default {
methods: {
logout() {
// 手动设置跳转路径
// this.$router.push('logout');
// 传参写法
this.$router.push({name: 'logout', params: {name: '张三'}})
}
}
};
</script>
命名视图
命名视图多用在左菜单右内容的位置，比如网站的个人中心
路由配置：
{
path: '/profile',
component: Profile,
children: [
{
path: 'info/:name',
components: {
# 这里配置视图展示
// default: Infos # 如果只有一个视窗，这里可以设置默认值
asideContent: Infos
}
}
]
}
模板配置：
<template>
<div class="row">
<div class="col-md-9">
# 命名视图展示位置
<router-view name="asideContent"></router-view>
</div>
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item">
<router-link to="/profile/info/张三">个人信息</router-link>
</li>
<li class="list-group-item">
<router-link to="/profile/star">我的积分</router-link>
</li>
<li class="list-group-item">
<router-link to="/info">个人信息</router-link>
</li>
<li class="list-group-item">
<router-link to="/info">个人信息</router-link>
</li>
<li class="list-group-item">
<router-link to="/info">个人信息</router-link>
</li>
</ul>
</div>
</div>
</template>
最新文章
- Android 常见工具类封装
- 开始ubuntu 14.04 的装X模式---终端模式下中文输入，听歌，上irc 开启framebuffer看电影 截图
- C++高精度运算类bign (重载操作符)
- Web模板
- Matlab Error （Matrix dimensions must agree）
- matlab实现可调节占空比的方波
- (转)Amoeba for MySQL 非常好用的mysql集群软件
- 为实施了IFD的Dynamics 365更换自签名的SSL证书以符合Chrome的要求
- ssm+maven 框架整合
- Thinkphp3.2简单解决多文件上传只上传一张的问题
- Luogu1967 NOIP2013 货车运输 最大生成树、倍增
- 11th 最后的致意
- oracle加密-des 简单举例.
- 【Android实验】UI设计-Android计算器
- oracle中的分支与循环语句
- 2017 ACM Arabella Collegiate Programming Contest(solved 11/13)
- SpringBoot页面访问处理
- 统一日志系统 Log4Net/ExceptionLess
- Kibana6.x.x源码分析--启动时无反应分析
- webpack 3.8 使用 extract-text-webpack-plugin 3.0 抽取css失败：You may need an appropriate loader to handle this file type.