03-vue-router
前端路由的实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
SPA : Single Page Application 前端路由
1.锚点值 监视
2.ajax获取动态的数据
3.核心点是锚点值的改变 前端中 vue|react|angular 都很适合做单页面应用
--> <a href="#/login">登录页面</a>
<a href="#/register">注册页面</a>
<div id="app"> </div> <script type="text/javascript"> // onhashchange 事件 url上的锚点数据（#/xxx改变）
var oDiv = document.getElementById('app'); window.onhashchange = function () {
console.log(location.hash);
// 根据不同的锚点值，对页面不同的切换。
switch (location.hash) {
case '#/login':
oDiv.innerHTML = '<h2>登录页面</h2>';
break;
case '#/register':
oDiv.innerHTML = '<h2>注册页面</h2>';
break;
default:
// statements_def
break;
}
}
</script> </body>
</html>
vue+vue-router 主要来做单页面应用（Single Page Application）
为什么我们要做单页面应用？
（1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 “白屏” 用户体验不好
（2）SPA 单页面应用 ： 锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据
页面不立刻跳转用户体验好
vue-router集成
它是vue中核心插件
下载vue-router
npm init --yes
npm install vue-router --save引入vue-router的模块 默认会抛出一个VueRouter对象 另外还有两个全局的组件router-link 和router-view
Vue.use(VueRouter)
创建路由对象
var router = new VueRouter({
// 配置路由对象
routes:[
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
}
]
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<!-- 1.引入 vue-router的对象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter对象 vue-router 还给咱们提供了两个全局的组件 router-link router-view-->
<script type="text/javascript"> // 2.让Vue使用该VueRouter创建
Vue.use(VueRouter); var Login = {
template: `
<div>登录页面</div>
`
};
var Register = {
template: `
<div>注册页面</div>
`
}; // 3.创建一个路由对象
var router = new VueRouter({
// 配置路由对象 routes: [
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
}
] });
var App = { <!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->
template: `
<div>
<router-link to="/login">登录页面</router-link>
<router-link to="/register">注册页面</router-link>
<router-view></router-view>
</div>
`, <!--路由组件的出口--> }; new Vue({
el: '#app',
components: {
App
},
router, //使用路由，不然会报错
template: `<App />` }); </script> </body>
</html>
02-router 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<!-- 1.引入 vue-router的对象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter对象 vue-router 还给咱们提供了两个全局的组件 router-link router-view-->
<script type="text/javascript"> // 2.让Vue使用该VueRouter创建
Vue.use(VueRouter); var Login = {
template: `
<div>登录页面</div>`
};
var Register = {
template: `
<div>注册页面</div>`
};
// 3.创建一个路由对象
var router = new VueRouter({
// 配置路由对象
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
}
] });
var App = {
// 绑定路由
template: `
<div>
<router-link :to="{name:'login'}">登录页面</router-link>
<router-link :to="{name:'register'}">注册页面</router-link>
<router-view></router-view>
</div>`
//路由组件的出口
};
new Vue({
el: '#app',
components: {
App
},
router,
template: `<App />`
});
</script>
</body>
</html>
03-命名路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<!-- 1.引入 vue-router的对象 -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<!-- 全局的VueRouter对象 vue-router 还给咱们提供了两个全局的组件 router-link router-view-->
<script type="text/javascript"> // 路由范式
// (1)xxxx.html#/user/1 params
// (2)xxxx.html#/user?userId = 2 query
// 2.让Vue使用该VueRouter创建
Vue.use(VueRouter);
var UserParams = {
template: `
<div>我是用户1</div>
`,
created() {
console.log(this.$route.params.userId);
// 发送ajax请求
console.log(this.$router);
}
};
var UserQuery = {
template: `
<div>我是用户2</div>
`,
created() {
console.log(this.$route);
// 发送ajax请求
console.log(this.$router); // 总的 router 对象
console.log('route',this.$route) // 单个的route 对象 }
}; // 3.创建一个路由对象
var router = new VueRouter({
// 配置路由对象
routes: [
{ // 动态的路由参数 以冒号开头
path: '/user/:userId',
name: 'userp',
component: UserParams
},
{
path: '/user',
name: 'userq',
component: UserQuery
}
]
});
var App = {
<!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->
template: `
<div>
<router-link :to="{name:'userp',params:{userId:1}}">用户1</router-link>
<router-link :to="{name:'userq',query:{userId:2}}">用户2</router-link>
<router-view></router-view>
</div>
`,
<!--路由组件的出口-->
}; new Vue({
el: '#app',
components: {
App
},
router,
template:
`<App />`
});
</script>
</body>
</html>
04-路由参数
4.路由对象挂载到vue实例化对象中
var App = {
template:`
<div>
<!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->
<router-link :to="{name:'login'}">登录页面</router-link>
<router-link :to="{name:'register'}">注册页面</router-link> <!--路由组件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
components:{
App
},
//挂载
router,
template:`<App />`
});
命名路由
给当前的配置路由信息对象设置name:'login'属性
:to = "{name:'login'}"
路由范式
(1)xxxx.html#/user/1 配置路由对象中
{
path:'/user/:id',
component:User
}
<router-link :to = "{name:'user',params:{id:1}}"></router-link>
(2)xxxx.html#/user?userId = 1
{ path:'/user' } <router-link :to = "{name:'user',query:{id:1}}"></router-link>
在组件内部通过this.$route 获取路由信息对象
嵌套路由
一个router-view 嵌套另外一个router-view
动态路由匹配
let User = {
template: '<div>User</div>'
}
let router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：
let User = {
template: '<div>User {{ $route.params.id }}</div>'
}
03-vue-router的更多相关文章
- 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 ...
- 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 ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue router 跳转到新的窗口方法
在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...
随机推荐
- jsp页面重定向
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...
- PPT汇报 评审表
评审表 团队编号 团队名称 团队项目名称 格式评审 内容评审 PPT评审 演讲评审 优点 存在问题(至少提3点) 建议 01 牛肉面不要牛肉不要面 02 正义联盟 我是一个图书小平台 03 什么队 & ...
- sql查询job
use msdb go --if object_id('tempdb..#SqlAgentJob') is not null -- drop table #SqlAgentJob --go decla ...
- （转）新手C#SQL语句的学习2018.08.13
1.创建数据库(create) CREATE DATABASE database-name 2.删除数据库(drop) drop database dbname 3.备份数据库 --- 创建 备份数据 ...
- Mysql 多个字段查找重复数
delete FROM `test_table` WHERE id in (SELECT id,concat(user_id,user_id2) as __fFROM `test_table` whe ...
- Baidu URL的部分参数
[Baidu URL的部分参数] 1.Baidu Form表单如下: 2.部分参数解析 wd 查询关键字,就是你要搜索的内容. bs 上一次搜索的词或者内容: rn 搜索结果页每页显示的数目,默认 ...
- 使用Fiddler发送POST请求
使用Fiddler发送POST请求 在测试过程中,有时会遇到需要修改请求中带的参数,去验证权限的安全问题,但是一些post请求,我们在浏览器中不能直接修改他的参数,然后去提交验证. 而fiddler可 ...
- 超薄二维Mo2C晶体
记者今天从中国科学院金属研究所获悉,该所沈阳材料科学国家(联合)实验室先进炭材料研究部任文才研究组在大尺寸高质量二维过渡族金属碳化物晶体的制备与物性研究方面取得了重要突破.相关成果日前在<自然— ...
- cdoj842-天下归晋 【树状数组】
http://acm.uestc.edu.cn/#/problem/show/842 天下归晋 Time Limit: 3000/1000MS (Java/Others) Memory Lim ...
- Python错误:close failed in file object destructor
我遇到的情况: 二进制程序调shell再调Python后,shell退出,Python进程挂到init上(不是僵尸进程),但 此时二进制程序未退出,这时候中断而二进制程序出现此提示. 经查询: 应该是 ...