07Vue.js快速入门-Vue路由详解
对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用， 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。
Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架进行结合。当然官方也给出了路由的方案：
vue-router; 建议还是用官方的最好，使用量也是最大，相对来说Vue框架的升级路由组件升级也会及时跟上，所以为了以后的维护和升级方便还是使用Vue自家的东西最好。
7.1. Vue-router的版本对应
注意: vue-router@2.x 只适用于 Vue 2.x 版本。 vue-router@1.x 对应于Vue1.x版本。
- 的Github地址：vue-router
- 文档地址
7.2. vue-router的安装使用
- CDN连接方式
https://unpkg.com/vue-router/dist/vue-router.js
- npm 安装
npm install vue-router
7.3. vue-router 入门demo
vue-router开发的步骤：
第一步： 引入vue和vue-router包。
可以使用cdn的方式或者npm的方式。如果配合npm和webpack的话可以直接作为一个模块导入即可。但是作为初学入门的话建议还是 直接使用cdn包的形式，先学会怎么用路由。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
第二步： 定义路由跳转的组件
// 1\. 定义（路由）组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }第三步： 定义路由规则对象
// 每个路由path应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 创建路由对象
const router = new VueRouter({
routes // （缩写）相当于 routes: routes，es6的新语法
})
- 第四步： 创建Vue对象，并加重上面创建的路由对象
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
- 第五步： 在模板中编写路由跳转链接
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
最终的代码：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// 1\. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2\. 定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3\. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4\. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
7.4. 使用vue-router的综合实例
下面是一个综合的例子, 页面上有几个导航的按钮，然后通过点击不同的按钮，可以在当前页面切换不同的组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
ul, li { list-style: none; }
ul { overflow: hidden; }
li { float: left; width: 100px; }
h2 { background-color: #903;}
</style>
</head>
<body>
<div id="app">
<top-bar> </top-bar>
<hr>
<p>email to: {{ email }}</p>
<hr>
<router-view class="view one"></router-view>
<footer-bar></footer-bar>
</div>
<script>
var topbarTemp = `
<nav>
<ul>
<li v-for="item in NavList">
<router-link :to="item.url">{{ item.name }}</router-link>
</li>
</ul>
</nav>
`;
// 定义组件：topbar
Vue.component('top-bar', {
template: topbarTemp,
data: function () {
return {
NavList: [
{ name: '首页', url: '/home'},
{ name: '产品', url: '/product'},
{ name: '服务', url: '/service'},
{ name: '关于', url: '/about'}
]
}
}
});
Vue.component('footer-bar', { // 定义组件 footerbar
template: `
<footer>
<hr/>
<p>版权所有@flydragon<p>
</footer>
`
});
// 创建home模块
var home = {
template: `<div> <h2>{{ msg }}<h2></div>`,
data: function () {
return { msg: 'this is home view' }
}
};
// 创建product 模块
var product = {
template: `<div> {{ msg }}</div>`,
data: function () {
return { msg: 'this is product view' }
}
}
// 定义路由对象
var router = new VueRouter({
routes: [
{ path: '/home', component: home },
{ path: '/product', component: product }
]
});
// 初始化一个Vue实例
var app = new Vue({
el: '#app',
data: {
email: 'flydragon@gmail.com'
},
router: router
});
</script>
</body>
</html>
7.5. 路由参数获取
定义路由路径的时候，可以指定参数。参数需要通过路径进行标识：/user/:id就是定义了一个规则，/user开头，然后后面的就是id参数的值。 比如：
路由规则： /user/:id
/user/9 => id = 9
/user/8 => id = 8
/user/1 => id = 1
然后在跳转后的vue中可以通过this.$route.params.参数名获取对应的参数。 比如代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<nav>
<router-link to="/user/9">用户</router-link>
<router-link to="/stu/malun">学生</router-link>
<hr>
</nav>
<router-view></router-view>
</div>
<script>
var user = {
template: `
<div>user id is : {{ $route.params.id }}</div>
`
};
var stu = {
template: `
<div>
<h2>{{ getName }}</h2>
</div>
`,
computed: {
getName: function () {
return this.$route.params.name;
}
}
};
var router = new VueRouter({
routes: [
{ path: '/user/:id', component: user },
{ path: '/stu/:name', component: stu }
]
});
var app = new Vue({
el: '#app',
router: router
});
</script>
</body>
</html>
7.6. js控制路由跳转
上面我们演示的都是通过router-link进行跳转。 其实我们还可以通过js编程的方式进行路由的跳转。
// 当前路由的view跳转到 /home
router.push('home')
// 对象, 跳转到/home
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
7.7. 嵌套路由
嵌套路由跟普通路由基本没有什么区别。但是可以让vue开发变的非常灵活。 官网这块写的也非常好，我就直接拷贝了（原谅我吧。） 实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
<div id="app">
<router-view></router-view>
</div>
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>：
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。 你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})
联系老马
对应视频地址：https://chuanke.baidu.com/s5508922.html
老马qq： 515154084
老马微信：请扫码
07Vue.js快速入门-Vue路由详解的更多相关文章
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- vue路由详解
自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤. 安装 直接下载/CDN https://unpkg.com/vue-router/dist/vue-r ...
- react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...
- react router @4 和 vue路由 详解(二)react-router @4用法
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 2.react-router @4用法 a.大概目录 不需要像vue那样麻烦的 ...
- 09Vue.js快速入门-Vue入门之Vuex实战
9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...
随机推荐
- Linux-非结构化数据同步-Linux下Rsync+Rsync实现非结构化增量差异数据的同步2
说明: 操作系统:CentOS 5.X 源服务器:192.168.21.129 目标服务器:192.168.21.127,192.168.21.128 目的:把源服务器上/home/www.osyun ...
- webpack window 使用sass来编译css样式
1.执行安装: npm install sass-loader --save-dev (此处不行的话就换上npm install node-sass) 2.稍微修改一下config,删掉我们先前添加的 ...
- Android MD5校验码的生成与算法实现
在Java中,java.security.MessageDigest (rt.jar中)已经定义了 MD5 的计算,所以我们只需要简单地调用即可得到 MD5 的128 位整数.然后将此 128 位计 ...
- C#代码规范-编程秘笈
原文地址:https://www.cnblogs.com/zzp0320/p/6949973.html 1.引言 本文是一套面向C# programmer和C# developer进行开发所应遵循的开 ...
- 【struts2】核心概念
1)FilterDispatcher Struts2的前端控制器,也是Struts2的MVC中的控制器部分.在实际开发中,只需要在web.xml中配置一次即可,如下所示: <filter> ...
- SharePoint中在线编辑文档
我一直以为只有在Document Library里面的File才会支持在线编辑.直到今天早上我才发现用IE打开List里面的Attachments也是支持在线编辑的,但前提是必须是IE浏览器. 目前正 ...
- dpkg卸载deb包
一.背景: 一个脚本安装mysql,结果提示缺少依赖库,安装失败. 二.查询: 此时查询deb文件已经安装的情况,得到这个结果: root@debian:~# dpkg -l |grep mysql- ...
- stm8 io口重映射
STM8S003F3端口可以设置重映射,如pin16的PC6管脚,默认复用功能是SPI_MOSI功能,可以重映射为TIM1_CH1,也就是timer1的1通道.映射方式并不像STM32那样有个AFR寄 ...
- 常用代码之五：RequireJS, 一个Define需要且只能有一个返回值/对象，一个JS文件里只能放一个Define.
RequireJS 介绍说一个JS文件里只能放一个Define,这个众所周知,不提. 关于Define,它需要有一个返回值/对象,且只能有一个返回值/对象,这一点却是好多帖子没有提到的,但又非常重要的 ...
- java线程五种状态
java线程五种状态: 创建 -> 就绪 -> 运行 -> 销毁 创建 -> 就绪 -> 运行 -> 等待(缺少资源) -> 销毁 下图:各种状态转换