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 ...
随机推荐
- 让apache支持htaccess文件
第一:检测 apache是否开启mod_rewrite 通过php提供的phpinfo()函数查看环境配置,在"apache2handler -> Loaded Modules&quo ...
- svn更新代码时控制台出现的英文字母表示什么意思
U:表示从服务器收到文件更新了 G:表示本地文件以及服务器文件都已经更新,而且成功的合并了 A:表示有文件或者目录添加到工作目录 R:表示文件或者目录被替换了 C:表示文件的本地修改和服务器修改发生冲 ...
- 【354】Numpy 相关函数应用
numpy中的ndarray方法和属性 - bonelee - 博客园 numpy.ndarray — NumPy v1.15 Manual 属性: T:转置,同 transpose() flat:转 ...
- 关于Git的礼节
(这里的内容本来是<怎样尊重一个程序员>的一小节,但由于Git的使用引起了很普遍的不尊重程序员的现象,现在特别将这一节提出来单独成文.) Git是现在最流行的代码版本控制工具.用外行话说, ...
- 发布MVC项目到服务器上时候遇到的 模块 DirectoryListingModule 通知 ExecuteRequestHandler 处理程序 StaticFile 错误代码 0x00000000
应用程序“HMW121197”中的服务器错误错误摘要HTTP 错误 403.14 - ForbiddenWeb 服务器被配置为不列出此目录的内容. 详细错误信息模块 DirectoryListingM ...
- proc
1. /proc 下文件的内容是动态创建的,当文件可写时可用作控制和配置目的. 2. 在某个进程读取 /proc 文件时,内核会分配一个内存页,驱动程序通过这个内存页将数据返回到用户空间 (read( ...
- Linux运维就业技术指导（九）期末架构考核
一,毕业架构设计考核筹备 1.1,架构图模板示例 1.1.1 架构图(一)概述 本架构是4层lvs负载均衡给后方7层nginx反向代理: 业务进行了动静分离: 数据库前端有memcached缓存组,降 ...
- STL容器的常用用法
STL: 1.vector: vector<int> v;vector<int> v(10);//定义大小为10的int型向量容器.vector<int> v(10 ...
- C++中纯虚函数
1.纯虚函数 virtual ReturnType Function()= 0; 纯虚函数可以让类先具有一个操作名称,而没有操作内容,让派生类在继承时再去具体地给出定义.凡是含有纯虚函数的类叫做抽象类 ...
- ubuntu 安装 google Gtest
1.安装源代码 在ubuntu的桌面上,右键选择打开终端,在终端中输入如下命令: $ sudo apt-get install libgtest-dev 下载源码后,apt将会在目录/usr/src/ ...