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 ...
随机推荐
- Mysql 获取当天,昨天,本周,本月,上周,上月的起始时间
转自: http://www.cppblog.com/tx7do/archive/2017/07/19/215119.html -- 今天 SELECT DATE_FORMAT(NOW(),'%Y-% ...
- UI5-文档-4.1-Hello World!
如你所知,SAPUI5是关于HTML5的.让我们开始构建第一个仅使用HTML的“Hello World”. Preview 浏览器显示文本“Hello World” Coding 你可以在此查看和下载 ...
- tomcat APR的配置
Tomcat 可以使用 APR 来提供超强的可伸缩性和性能,更好地集成本地服务器技术. APR(Apache Portable Runtime) 是一个高可移植库,它是 Apache HTTP Ser ...
- one by one 项目 part 5
问题汇总 一.Can't connect to MySQL server on 'localhost' (10061)翻译:不能连接到 localhost 上的mysql分析:这说明“localhos ...
- js中常见的创建对象的方法
前两天好好的把高程对象那一块又读了下,顺便写点笔记.补一句:代码都测试过了,应该没有问题的.可以直接拿到控制台跑! 1.工厂模式 function person(name, age, job) { v ...
- linux sleep用法
应用程序:#include <syswait.h>usleep(n) //n微秒Sleep(n)//n毫秒sleep(n)//n秒驱动程序:#include <linux/delay ...
- poj1088-滑雪 【dfs 记忆化搜索】
http://poj.org/problem?id=1088 滑雪 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 79806 ...
- vortex
vortex - Bing dictionary US['vɔr.teks]UK['vɔː(r)teks] n.旋涡:涡旋:低涡:感情(或局势)的旋涡 网络漩涡:涡流:旋风 变形Plural Form ...
- 使用Maven部署构件至私服
--------------------siwuxie095 使用 Maven 部署构件至私服 1.部署构件到 Nexu ...
- 二叉树的最大/小/平衡 深度 depth of binary tree
［抄题］: 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的距离. ［思维问题］: ［一句话思路］: 分合法的定义 ［输入量］:空: 正常情况:特大:特小:程序里处理到的特殊情况 ...