vue-router使用入门
安装及基本配置
# 安装
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>
vue-router使用入门的更多相关文章
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- 04慕课网《vue.js2.5入门》——Vue-cli开发todolist
主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- Vue之小入门
Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
随机推荐
- ElasticSearch再学习
ElasticSearch参数详解 本次使用的windows的版本,如若Linux移步:https://www.cnblogs.com/msi-chen/p/10335794.html 配置文件参数 ...
- Go 关系运算符
Go 关系运算符 package main import "fmt" func main() { var a int = 21 var b int = 10 if( a == b ...
- css制作旋转风车(transform 篇)
做这个案例之前首先要大概了解CSS的transform的属性 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 看看效果图 打开的时候自动旋转 ...
- thinkphp PATH_INFO支持
如果发生在本地测试正常,但是一旦部署到服务器环境后会发生只能访问首页的情况,很有可能是你的服务器或者空间不支持PATH_INFO所致. 系统内置提供了对PATH_INFO的兼容判断处理,但是不能确保在 ...
- char*转LPCWSTR【转载】
文章转载自https://blog.csdn.net/zhouxuguang236/article/details/8761497 通过MultiByteToWideChar函数转换 MultiByt ...
- DNS隧道--dnscat2
安装 服务端 git clone https://github.com/iagox86/dnscat2.git cd dnscat2 cd server sudo gem install bundle ...
- spring boot 项目打成war,丢入tomcat独立运行
小插曲:通过cmd运行startup.bat,cmd界面显示乱码 解决方法:进入tomcat目录,conf文件夹,用编辑器打开logging.properties 将java.util.logging ...
- HTML_标签
<!--HTML:1.概念:最基础的网页开发语言Hyper Text Markup Language 超文本标记语言超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本. ...
- 结对编程收获-Core10组-PB16110698
本周结对编程追加作业:记录收获.坦白说,我的收获多而杂,一时不知从何说起,以下试图从各方面简要谈谈. 一.编程能力收获 从编程能力方面,我收获的主要是类的设计思路和算法设计.在作业要求blog的指引下 ...
- 用Jquery写返回顶部代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...