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 ...
随机推荐
- iOS toll-free bridge
https://developer.apple.com/library/ios/documentation/CoreFoundation/Conceptual/CFDesignConcepts/Art ...
- Hystrix-超时设置
由于客户端请求服务端方法时,服务端方法响应超过1秒将会触发降级,所以我们可以配置Hystrix默认的超时配置 如果我们没有配置默认的超时时间,Hystrix将取default_executionTim ...
- Haskell语言学习笔记（34）System.Environment
System.Environment getArgs :: IO [String] getProgName :: IO String getExecutablePath :: IO FilePath ...
- 如何使用Python画地图数据
http://blog.csdn.net/wen_fei/article/details/78355699
- ingress 密码验证
traefik ingress 上面的方式需要引入haprox或者nginx,多引入了一个代理转发层,其实ingress本身就提供了basic auth的支持,在ingress规则中添加额外的认证an ...
- 关于使用service的上下文和activity来读取sharedpreferences的同步问题
比如我用activity 对象 mainactivity 的context 获取了sharedpreferences对象,并putString(context, "demo", & ...
- Java RSA 生成公钥 私钥
目前为止,RSA是应用最多的公钥加密算法,能够抵抗已知的绝大多数密码攻击,已被ISO推荐为公钥数据加密标准. RSA算法中,每个通信主体都有两个钥匙,一个公钥(Public Key)用来对数据进行加密 ...
- 开始一个Android的appium实例
1.查看Android的应用包名和activity的方法 (网上有很多种方法,这里应用的是查看日志的方法) CMD中输入>adb logcat -c ...
- mysql 导出sql结果成csv文件
mysql -uroot -p -e "use database;sql语句:" > a.csv 举例: mysql -uroot -p -e "use main; ...
- python中的&&及||
首先说明一下,在python中是没有&&及||这两个运算符的,取而代之的是英文and和or.其他运算符没有变动. 接着重点要说明的是python中的a.any(),我之所以会涉及到这个 ...