Vue之路由的使用
零、传统路由与SPA的区别
- 传统开发方式下，URL改变后，就会立刻发生请求去请求整个页面，这样可能请求加载的资源过多，可能会让页面出现白屏。
- 在SPA（Single Page Application）单页面应用下，当锚点值改变后，不会立刻发生请求，而是在某个合适的时机，发起ajax请求，实现局部改变页面的数据。优点是：不是整个页面发生跳转，那么用户的体验就更好了。
一、vue-router的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<!-- 1. 先引入vue.js(被vue-router所依赖)-->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 2. 再引入插件vue-router(使用npm install vue-router --save安装到相应的文件夹下)-->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
/* 演示示例：页面里有2个a标签，注册和登录，点击注册、登录返回不同的内容，
且有公共内容（主页公共数据），来实现局部页面的跳转且URL要发生相应的改变。
*/
// 3. 让vue使用VueRouter创建(某些情况下可以不用，这里暂且加上)
Vue.use(VueRouter);
// 声明使用了路由的组件
var Login = {
template: `
<div>我是登录页面</div>
`
};
var Register = {
template: `<div>我是注册页面</div>`,
};
// 4. 创建VueRouter对象
var router = new VueRouter({
// 5. 配置路由对象的规则如匹配路径、组件等
routes: [
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
}
]
});
// 当使用了vue-router后就会抛出两个全局的组件：router-link、router-view
// router-link相当于a标签，router-view是路由组件渲染的出口
// 声明入口组件App
var App = {
template: `
<div>
我是公共内容<br/>
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
<router-view></router-view>
</div>
`,
};
new Vue({
el: '#app',
// 5. 将配置后的路由对象关联到vue实例化对象中
router: router,
template: `<App />`,
components: {
App
}
});
</script>
</body>
</html>
命名路由
路由也可以拥有自己的名字，上面的例子也可以改写为下面：
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
}
]
...
<router-link :to='{name:"login"}'>登录</router-link>
<router-link :to='{name:"register"}'>注册</router-link>
路由参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
/*
路由参数的使用：常见的路由范式有以下2种：
- xxx.html/user/1 params 动态路由参数（restful风格）
- xxx.html/user?userId=1 query 查询参数
*/
Vue.use(VueRouter);
// 声明使用了路由的组件
var Login = {
template: `
<div>我是登录页面</div>
`
};
var Register = {
template: `<div>我是注册页面</div>`,
};
var router = new VueRouter({
routes: [
{
// 动态路由参数以冒号开头
path: '/login/:id',
name: 'login',
component: Login
},
{
// query参数在这里不做修改
path: '/register',
name: 'register',
component: Register
}
]
});
// 声明入口组件App
var App = {
template: `
<div>
我是公共内容<br/>
<router-link :to = "{name:'login',params:{'id':1}}">登录params</router-link>
<router-link :to = "{name:'register',query:{'userId':2}}">注册query</router-link>
<router-view></router-view>
</div>
`,
};
new Vue({
el: '#app',
router: router,
template: `<App />`,
components: {
App
}
});
</script>
</body>
</html>
二、嵌套路由、动态路由
掘金就是由vue写的，接下来的这个demo会模仿掘金首页的构成，实现嵌套路由、动态路由匹配功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>掘金</title>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
Vue.use(VueRouter);
//第二层路由组件，实现了嵌套的路由组件
// 这一层的三个路由组件：推荐、后端、前端可以看成结构是相同的，只有数据不同
// 所以为了提高代码的复用性，就需要采用动态路由匹配的方式，及只创建一个组件，然后替换里面的数据
var Home = {
template: `
<div>
<router-link :to="{name:'category', params:{category:'recommened'}}">推荐</router-link>
<router-link :to="{name:'category', params:{category:'backend'}}">后端</router-link>
<router-link :to="{name:'category', params:{category:'fronted'}}">前端</router-link>
<router-view></router-view>
</div>
`
};
var Pins = {
template: `<div>我是沸点</div>`
};
var Topics = {
template: `<div>我是话题</div>`
};
// 创建一个组件，然后使用动态路由匹配的方式
var Commons = {
data() {
return {
msg: 'recommened'
}
},
template: `
<div>
我是 {{ msg }}
</div>
`,
watch: {
// 利用watch侦听器来监听$route来检测动态路由的切换
'$route' (to, from) {
console.log(to.params.category);
// 模拟路由的变化引起的数据的变化
this.msg = to.params.category;
}
}
};
var router = new VueRouter({
routes: [
{
path: '/',
component: Home,
// 嵌套路由的写法：
children: [
{
path: 'welcome/:category',
name: 'category',
component: Commons
}
]
},
{
path: '/pins',
component: Pins
},
{
path: '/topics',
component: Topics
}
]
});
// 第一层路由组件包括首页、沸点、话题等
var FRouter = {
template:`
<div>
第一层路由组件
<router-link to="/">首页</router-link>
<router-link to="/pins">沸点</router-link>
<router-link to="/topics">话题</router-link>
<router-view></router-view>
</div>
`
};
new Vue({
el: '#app',
router: router,
template: '<FRouter />',
components: {
FRouter
}
});
</script>
</body>
</html>
Vue之路由的使用的更多相关文章
- vue（5）—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue父路由默认选中第一个子路由，切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue权限路由实现方式总结二
之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...
- Vue 多路由文件的合并
Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一 ...
- vue+element-ui路由配置相关
vue+element-ui路由配置相关 转自:http://www.cnblogs.com/MonaSong/p/6703804.html vue-router2中说明了,子路由前面可以不加'/', ...
- vue嵌套路由-query传递参数（三）
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
随机推荐
- 深度评测丨 GaussDB(for Redis) 大 Key 操作的影响
本文分享自华为云社区<墨天轮评测:GaussDB(for Redis)大Key操作的影响>,作者: 高斯 Redis 官方博客. 在前一篇文章<墨天轮评测:GaussDB(for R ...
- hive 常用日期格式转换
固定日期转换成时间戳select unix_timestamp('2016-08-16','yyyy-MM-dd') --1471276800select unix_timestamp('201608 ...
- MySQL 事务的隔离级别及锁操作的一点点演示
MySQL 版本:5.7 安装环境:MAC OS 一.测试数据 测试数据库:test:测试表:tt CREATE TABLE `tt` ( `id` int(11) DEFAULT NULL, `na ...
- svn使用规范、在Windows下使用svn命令行工具、svn命令行的解释
以前在公司一直使用git,现在公司有用svn,一时间还真的不知道如何下手,在网上搜寻了很多大神和官网文档的指导,总结了下面一份教程,希望能够帮助大家快速上手,如果想更细致的了解相关内容,可以点击每个小 ...
- PHP页面编码问题
页面编码统一MySQL数据库编码.html页面编码.PHP或html文件本身编码要全部一致.1.MySQL数据库编码:建立数据库时指定编码(如gbk_chinese_ci),建立数据表.建立字段.插入 ...
- Vue小白练级之路---001表单验证功能的一般实现思路
思路: 先各自验证 非空校验 具体规则校验 后兜底校验( 防止用户没输入信息直接登录 ) 实现:( 以 element-ui 为例 ) 在 标签上用 model 动态绑定收集数据的对象(form) 在 ...
- mysql表查询、多表查询（增强查询的使用）子查询、合并查询，外连接，mysql5种约束，自增长
一.查询加强 1.在mysql中,日期类型可以直接比较,需要注意格式 2.%:表示0到多个字符, _:表示单个字符 exp:显示第二个字符为大写O的所有员工的姓名和工资 select name fr ...
- Solution -「BJWC 2018」「洛谷 P4486」Kakuro
\(\mathcal{Description}\) Link. 有一个 \(n\times m\) 的网格图,其中某些格子被主对角线划成两个三角形,称这样的格子为特殊格:初始时,除了一些障碍格 ...
- Linux海王 之 pdsh （并行管理工具）
文章目录 安装 使用 示例 -w 指定主机 -l 指定用户 -g指定用户组 主机列表 交互式界面 pdsh是一个多线程远程shell客户机,它在多个远程主机上并行执行命令 pdsh可以使用几种不同的远 ...
- 详解Spring DI循环依赖实现机制
一个对象引用另一个对象递归注入属性即可实现后续的实例化,同时如果两个或者两个以上的 Bean 互相持有对⽅,最终形成闭环即所谓的循环依赖怎么实现呢属性的互相注入呢? Spring bean生命周期具体 ...