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设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
随机推荐
- #20175204 张湲祯 2018-2019-2《Java程序设计》第五周学习总结
20175204 张湲祯 2018-2019-2<Java程序设计>第五周学习总结 教材学习内容总结 -第六章接口与实现要点: -接口: 1.使用关键字interface定义接口. 2.接 ...
- Gitlab_ansible_jenkins三剑客②Gitlab的后台管理
系统信息和日志 健康状态 使用gitlab的用户管理和审批功能 创建用户 创建一个lead普通账号 进入test-repo仓库 这样就把dev添加到了test-repo这个项目中,并且有了develo ...
- Go语言--基础语法笔记
### 换了工作,好久没有添加新文章了,本来是想更新到github上的,想想还是在博客里放着,感觉以前的文章都没有很仔细,都只是问题处理的记录, 以后想新加一些整理的笔记也好 ### 主要内容 2.1 ...
- c#解决浏览器跨域问题
1.浏览器为什么不能跨域? 浏览器有一个基本的安全策略--同源策略.为保证用户的信息安全,它对不同源的文档或脚本对当前文档的读写操作做了限制.域名,子域名,端口号或协议不同都属于不同源,当脚本被认为是 ...
- 仓鼠找sugar
洛谷P3398 仓鼠找sugar 题目传送门 参考 \(whm\) 大佬的博客 这儿 代码不难,难在思路上. 令 \(X = lca(a,b) Y = lca(c,d)\) 仓鼠 \((cs)\) 的 ...
- 消息队列(MQ)
1. 分类: 获取消息方式:A. push(推)方式:优点——可以尽可能快地将消息发送给消费者,缺点——如果消费者处理能力跟不上,消费者的缓冲区可能会溢出: B. pull(拉)方式:优点—— ...
- 网络流24题——魔术球问题 luogu 2765
题目描述:这里 这道题是网络流问题中第一个难点,也是一个很重要的问题 如果直接建图感觉无从下手,因为如果不知道放几个球我就无法得知该如何建图(这是很显然的,比如我知道 $1+48=49=7^2$ ,可 ...
- 物化视图(materialized view) 实现数据迁移、数据定时同步
近日公司有一个9i 的Oracle数据库,运行效率低下.想要将其升级到11G. 但是升级之前 要将数据进行同步,好在表不是很多.只有三张表.业务压力也不大,就想到了使用物 化视图的方式将数据同步过来. ...
- cocos creator中粒子效果的使用
就如同上图的星星特效一样,在触碰时产生特效,但是并不销毁节点,因为要使用很多次,因此使用节点池NodePool保存起来的. 以下是使用粒子效果使要使用到的一些基本控制函数: 我的使用:
- C# Levenshtein计算字符串的相似度
static void Main(string[] args) { Levenshtein(@"今天天气不错", @"今天的天气不错啊"); Console.R ...