Vue-router重修01
---恢复内容开始---
1、在vue中获取dom
vue中不建议您亲自进行dom操作
vue实例内置ref属性存储或获取相应的dom元素
<div ref="dv"></div>
...
console.log(this.$refs.dv)//通过this.$refs来获取
ref可以获取组件（将获取组件对象）或dom元素。重名将覆盖。不建议经常使用
2、给DOM元素添加事件的特殊情况(介绍nextTick)
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script>
let temp = {
template:
'<div><input ref="input" type="text" v-show="isShow"></input></div>',
mounted() {
this.isShow=true
//this.$refs.input.focus()
//无法正常进行焦点获取，此时DOM还没有更新完成,无法获取
//为此使用VUE的$nextTick来完成相应的功能
this.$nextTick(function(){
this.$refs.input.focus()
})
},
data: function () {
return { isShow: false }
}
}
new Vue({
el: '#app',
template: "<temp></temp>",
data() {
return {
}
},
components: {
temp
} })
</script> </html>
3、前端路由的原理
1）url中#后的即为哈希值
router-link默认渲染为a
其to属性渲染为href
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script>
Vue.use(VueRouter)//显式声明使用 let login = {
template: '<h2>login</h2>'
}
let register = {
template: '<h2>register</h2>'
} let router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
}) let App = {
template: `<div>
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
<router-view></router-view>
</div>`
}
new Vue({
el: '#app',
template: "<App />",
data() {
return {
}
},
components: {
App
},
router//记得注册路由
})
</script> </html>
$route：路由信息对象
$router:路由实例对象
2）命名路由及其使用方法
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script>
Vue.use(VueRouter)//显式声明使用 let login = {
template: '<h2>login</h2>'
}
let register = {
template: '<h2>register</h2>'
} let router = new VueRouter({
routes: [
{ path: '/login', name: 'login', component: login },
{ path: '/register', name: 'register', component: register }
]
}) let 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',
template: "<App />",
data() {
return {
}
},
components: {
App
},
router//记得注册路由
})
</script> </html>
路由范式
即动态路由
param使用示例如下：
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script>
Vue.use(VueRouter)//显式声明使用 let login = {
template: '<h2>login</h2>'
}
let register = {
template: '<h2>register</h2>'
} let router = new VueRouter({
routes: [
{//以下针对param的，query无须其他处理就可以被获取
path: '/login/:id/:psword',
name: 'login',
component: login
},
{
path: '/register/:username',
name: 'register',
component: register
}
]
}) let App = {
template: `<div>
<router-link :to="{name:'login',params:{id:1,psword:12345}}">登录</router-link>
<router-link :to="{name:'register',params:{username:'linda'}}">注册</router-link>
<router-view></router-view>
</div>`
}
new Vue({
el: '#app',
template: "<App />",
data() {
return {
}
},
components: {
App
},
router//记得注册路由
})
</script> </html>
query示例如下
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script>
Vue.use(VueRouter)//显式声明使用 let login = {
template: '<h2>login</h2>'
}
let register = {
template: '<h2>register</h2>'
} let router = new VueRouter({
routes: [
{//query无须其他处理就可以被获取,自动拼接在url后
path: '/login',
name: 'login',
component: login
},
{
path: '/register',
name: 'register',
component: register
}
]
}) let App = {
template: `<div>
<router-link :to="{name:'login',query:{id:1,psword:12345}}">登录</router-link>
<router-link :to="{name:'register',query:{username:'linda'}}">注册</router-link>
<router-view></router-view>
</div>`
}
new Vue({
el: '#app',
template: "<App />",
data() {
return {
}
},
components: {
App
},
router//记得注册路由
})
</script> </html>
4）vue-router抛出的两个对象router/route 路由实例对象/路由信息对象
5）嵌套路由
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script>
Vue.use(VueRouter)//显式声明使用 let login = {
template: '<h2>login</h2>', }
let register = {
template: '<h2>register</h2>', }
let home = {
template: `<div><h1>首页</h1>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/register">注册</router-link>
<router-view></router-view>
</div>`
} let router = new VueRouter({
routes: [
{
path: '/home',
component: home,
children: [{
path: 'login',//前面不要带/，否则以根路径请求
component: login
},
{
path: 'register',
component: register
}
]
}, ]
}) let App = {
template: `<div>
<router-view></router-view>
</div>`
}
new Vue({
el: '#app',
template: '<App />',
data() {
return {
}
},
components: {
App
},
router//记得注册路由
})
</script> </html>
各子组件dom结构不一样时才使用嵌套路由
5）监视路由变化
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script>
Vue.use(VueRouter)//显式声明使用 let login = {
template: '<h2>login</h2>', } let step = {
template: '<h3>{{this.$route.params.id}}注册开始</h3>',
created () {
console.log("step组件被创建了")
}
} let register = {//注意，通过监听路由参数切换组件时，vue将对同一组件进行复用，不再调用钩子
template: `<div><h2>register</h2>
<router-link :to='{name:"step",params:{id:"007"}}'>007注册</router-link>
<router-link :to='{name:"step",params:{id:"008"}}'>008注册</router-link>
<router-view></router-view></div>`, }
let home = {
template: `<div><h1>首页</h1>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/register">注册</router-link>
<router-view></router-view>
</div>`
} let router = new VueRouter({
routes: [
{
path: '/',
redirect: 'home'
},
{
path: '/home',
component: home,
children: [{
path: 'login',//前面不要带/，否则以根路径请求
component: login
},
{
path: 'register',
component: register,
children: [
{ path: 'step/:id', component: step, name: "step" },
]
}
]
}, ]
}) let App = {
template: `<div>
<router-view></router-view>
</div>`
}
new Vue({
el: '#app',
template: '<App />',
data() {
return {
}
},
components: {
App
},
router//记得注册路由
})
</script> </html>
6）结合watch监视并响应路由的变化
可以使用watch或vue2.2新特性中的beforeRouterUpdata来监听变化并做出响应
动态路由匹配和嵌套路由的应用场景：
公共组件里面/组件结构不一致
Vue-router重修01的更多相关文章
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- 8. Vue - Router
一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...
- 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设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
随机推荐
- php获取脚本执行的参数
在看PHP文档到预定义变量时碰到了$argc和$argv,顺手记录下 getopt()从命令行参数列表中获取选项 $arg = getopt('d:n:'); //只接收d n之后的参数 $num = ...
- SQL优化传送门
转载:pursuer.chen的SQL Server 容易忽略的错误 链接:https://www.cnblogs.com/chenmh/p/3999475.html
- 【Selenium】各浏览器(firefox,chrome,ie)驱动下载地址汇总
前两天使用Selenium分布式时,总抛出异常.更新成最新驱动可以解决.其中chrome异常如下, "platform": "WINDOWS" File &qu ...
- Java面试题 静态代码块 构造代码块 构造方法 的执行顺序
JAVA中的静态代码块 构造代码块 构造方法执行顺序: 静态代码块(类加载时执行)>>构造代码块>>构造方法 下面展示一个简单的例子,推荐大家动手运行一遍: public cl ...
- .net 操作excel
.net 操作excel的常用组件:EPPlus,NPOI 1.NPOI,即POI的.NET版本(POI是一套用Java写成的库,能够帮助开发者在没有安装微软Office的情况下读写Office文件, ...
- requests库写接口测试框架初学习
学习网址: https://docs.microsoft.com/en-us/openspecs/windows_protocols/ms-dscpm/ff75b907-415d-4220-89 ...
- 通过GIT_COMMIT进行代码回滚
首先需要安装插件:conditional-buildstep A buildstep wrapping any number of other buildsteps, controlling thei ...
- ios访问web页面<div>点击事件不起效果，以及alert()显示url的解决办法
ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...
- SEH exception with code 0xc0000005 thrown in the test body
在用Visual Studio时遇到这个报错.原因:访问了非法的内存地址. 这个问题不应该被忽略,通常是代码有bug. 解决办法: VS2013: 菜单->Debug->Exception ...
- 白话大数据 | Spark和Hadoop到底谁更厉害？
要想搞清楚spark跟Hadoop到底谁更厉害,首先得明白spark到底是什么鬼. 经过之前的介绍大家应该非常了解什么是Hadoop了(不了解的点击这里:白话大数据 | hadoop究竟是什么鬼),简 ...