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设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
随机推荐
- dubbo直连提供者 & 只订阅 & 只注册
1. dubbo直连提供者 在开发及测试环境下,经常需要绕过注册中心,只测试指定服务提供者,这时候可能需要点对点直连,点对点直连方式,将以服务接口为单位,忽略注册中心的提供者列表,A 接口配置点 ...
- Linux 使用 arp-scan 检查是否存在IP地址冲突
如果前期没有做好IP地址规划,即使有IP地址统一不小心也会犯错!推荐服务器IP地址使用要登记明细,上次机房批量部署服务器,就将已再用的IP又分配给另一台服务器,还好对业务没有造成大的影响. 那么在给服 ...
- [转] xgboost
还是不太明白,先mark一下 https://blog.csdn.net/v_july_v/article/details/81410574
- 爬虫 解析库re,Beautifulsoup,
re模块 点我回顾 Beautifulsoup模块 #安装 Beautiful Soup pip install beautifulsoup4 #安装解析器 Beautiful Soup支持Pytho ...
- 在线激活win10、win8/8.1和office2019、2016、2013等的kms激活工具
在线激活win10.win8/8.1和office2019.2016.2013等的kms激活工具 MicroKMS神龙版能激活win10.win8/8.1.win7以及server2008/2012/ ...
- vertical-align作用的前提++图片不上下居中
5.3.2 vertical-align作用的前提 很多人,尤其CSS新手,会问这么一个问题:“为什么我设置了vertical-align却没任何作用?” 因为vertical-align起作用是有前 ...
- Java 基本语法，标识符，修饰符，关键字
基本语法 编写 Java 程序时,应注意以下几点: 大小写敏感:Java 是大小写敏感的,这就意味着标识符 Hello 与 hello 是不同的. 类名:对于所有的类来说,类名的首字母应该大写.如果类 ...
- Bootstrap-datepicker3官方文档中文翻译---Markup/标记（原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html）
Markup/标记 下面是已经支持的标签的例子.这些标签本身不会提供DatePicker控件:你需要在标签上实例化Datepicker. input/输入框 最简单的例子: input获得焦点 (使用 ...
- 2018-2019-2 网络对抗技术 20165323 Exp6 信息搜集与漏洞扫描
一.实验内容 二.实验步骤 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 3.基本的扫描技术 主机发现 端口扫描 OS及服务版本探测 具体服务的查点 4.漏洞扫描 三.实验中遇到的问题 四. ...
- Linux密码重置
在启动菜单选择启动内核: 按e编辑,编辑修改两处:ro改为rw,和找到rhgb quiet一行: 把rhgb quiet替换为init=/bin/bash(临时生效): 按CTRL+X进入单用户模式: ...