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 ...
随机推荐
- Web Deploy
Web Deploy 服务器安装设置与使用 Win2008R2配置WebDeploy Visual Studio 使用Web Deploy发布项目
- WINFORM小列子参考
1.用树型列表动态显示菜单 密码:zx9t 二.Popup窗口提醒(桌面右下角出现) 密码:cjjo 三.台历 密码:nq4m 四.文件复制 密码:lsqj 五.进度条 密码:byti 六 ...
- 转载：canal数据库同步redis
ref: http://blog.csdn.net/tb3039450/article/details/53928351
- 趣味编程：CPS风格代码（Java 8，Functional Java版）
CPS风格代码(Java 8版) package fp; import java.util.function.IntConsumer; public class CPS { static int ad ...
- JS 实现Json查询的方法实例
其实很简单,我这部分代码,前一部分是简单的实现如何使用JS写模板,第二个就是具体的实现了JSON查询的一个扩展. 以后查询Json就有了利器了. 代码如下: /* * 定义模板函数 ...
- [故障引起的故事]URL中带加号的处理
问题起因: 客户订购了一关键字为"e+h 变送器" , 在首页推荐广告中,会根据用户在search 搜索过的关键字进行一个匹配投放.技术实现是UED 通过JS 获取coo ...
- android热门消息推送横向测评！[转]
关于这个话题,已经不是什么新鲜事了.对于大多数中小型公司一般都是选择第三方的服务来实现.但是现在已经有很多提供推送服务的公司和产品,如何选择一个适合自己项目的服务呢?它们之间都有什么差别?在此为大家做 ...
- SpringMVC TaskExecutor线程池
一.配置jdbc.properties添加: #------------ Task ------------ task.core_pool_size=5 task.max_pool_size=50 t ...
- 等待时间，time.sleep()和implicitly_wait()
在运行一个以前执行的过的功能时,报错了,不能执行了. 功能描述:通过导航,选择下拉项(发布职位功能),下面是审查的元素: 获取元素的代码: 尝试了用xpath去获取:driver.find_eleme ...
- cdoj802-Just a Line
http://acm.uestc.edu.cn/#/problem/show/802 Just a Line Time Limit: 3000/1000MS (Java/Others) Mem ...