Vue Router------第一天（一些路由的基础，包括动态路由匹配、编程式导航、重定向等）
2017-11-29 00:00
806 查看
摘要: 由于用vue+webpack+axios写一个简单的登录，
前后端分离，
需要前端去跳转，
所以学习一下vue router。
需要学习的很多，一步一步慢慢来。
只要肯努力，
一切都不会晚。
Fight!
路径参数使用:标记
参数被设置在this.$route.params
组件的生命周期钩子不会再被调用
复用组价时，用watch(检测变化)$route对象，对路由参数的变化作出响应
或者使用beforeRouteUpdate
匹配零个或多个
一个或多个
-自定义正则匹配
一个被渲染组件同样可以包含自己的嵌套<router-view>
在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置
以/开头的嵌套路径会被当作跟路径
声明式： <router-link :to="">
编程式： router.push()
location可以是字符串
location可以是对象
location可以是命名的路由
location可以是待查询参数
声明式： <router-link :to="" replace>
编程式： router.replace()
<router-view>没有设置name，默认为default
一个视图使用一个组件渲染
对于同一个路由，多个视图需要多个组件
重定向的目标是一个命名的路由
重定向的目标是一个方法，动态返回重定向目标
使用props解耦
这样就可以在任何地方使用该组件，使得该组件更易于重用和测试
前后端分离，
需要前端去跳转，
所以学习一下vue router。
需要学习的很多，一步一步慢慢来。
只要肯努力，
一切都不会晚。
Fight!
1.简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<!--我自己理解：<router-link>表示<a>,to表示href-->
<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 type="text/javascript">
// 1.定义路由组件，也可以引入
const Foo = {template: '<h1>Hello Foo</h1>'};
const Bar = {template: '<h1>Hello Bar</h1>'};
// 2.定义路由，每个路由映射一个组件
const routes = [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}];
// 3.创建router实例
const router = new VueRouter({
routes: routes
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>2.动态路由配置
不同的用户使用同一个组件路径参数使用:标记
参数被设置在this.$route.params
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<!--我自己理解：<router-link>表示<a>,to表示href-->
<router-link to="/user/foo">Go to User-Foo</router-link>
<router-link to="/user/bar">Go to User-Bar</router-link>
</p>
<!--模板-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 1.定义路由组件，也可以引入
const User = {template: '<p>User {{ $route.params.id }}</p>'}
// 2.定义路由，每个路由映射一个组件
const routes = [
{path: '/user/:id', component: User}];
// 3.创建router实例
const router = new VueRouter({
routes: routes
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>(1)响应路由参数的变化
两个路由渲染同一个组件时，比起销毁再创建，复用则更加高效组件的生命周期钩子不会再被调用
复用组价时，用watch(检测变化)$route对象，对路由参数的变化作出响应
或者使用beforeRouteUpdate
(2)高级匹配模式
可选的动态路径参数匹配零个或多个
一个或多个
-自定义正则匹配
(3)匹配优先级
谁先定义的，谁的优先级最高3.嵌套路由
<router-view>是最顶层的出口，渲染最高级路由匹配到的组件一个被渲染组件同样可以包含自己的嵌套<router-view>
在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置
以/开头的嵌套路径会被当作跟路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<router-link to="/user/foo/profile">Go to User-Foo-Profile</router-link>
<router-link to="/user/bar/posts">Go to User-Bar-Posts</router-link>
</p>
<!--模板-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义路由组件，也可以引入
const User = {
template: '<div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view></div>'
};
const UserProfile = {
template: '<h1>Profile</h1>'
};
const UserPosts = {
template: '<h1>Posts</h1>'
};
// 创建router实例
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
}
]
}
]
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>4.编程式导航
借助router的实例方法，通过编写代码来实现导航链接(1)router.push(location, onComplete?, onAbort?)
向History栈添加一个新的记录声明式： <router-link :to="">
编程式： router.push()
location可以是字符串
location可以是对象
location可以是命名的路由
location可以是待查询参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<button v-on:click="gotoProfile">Go to User-Foo-Profile</button>
<button v-on:click="gotoPosts">Go to User-Bar-Posts</button>
</p>
<!--模板-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义路由组件，也可以引入
const User = {
template: '<div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view></div>'
};
const UserProfile = {
template: '<h1>Profile</h1>'
};
const UserPosts = {
template: '<h1>Posts</h1>'
};
// 创建router实例
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
}
]
}
]
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router,
methods: {
gotoProfile: function () {
router.push('/user/foo/profile')
},
gotoPosts: function () {
router.push('/user/foo/posts')
}
}
}).$mount('#app')
</script>
</body>
</html>(2)router.replace(location, onComplete?, onAbort?)
不会向History栈添加新记录，只是替换掉当前的History记录声明式： <router-link :to="" replace>
编程式： router.replace()
(3)router.go(n)
在History记录中向前或者向后退多少步5.命名路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<!--/user/123-->
<!--声明式-->
<button v-on:click="goto123">Go to User-123</button>
<!--/user/124-->
<!--编程式-->
<router-link :to="{name: 'user', params: {userID: 124}}">Go to User-124</router-link>
</p>
<!--模板-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义路由组件，也可以引入
const User = {
template: '<h2>User {{ $route.params.id }}</h2>'
};
// 创建router实例
const router = new VueRouter({
routes: [
{
path: '/user/:userID',
name: 'user',
component: User // 定义路由，每个路由映射一个组件
}
]
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router,
methods: {
goto123: function () {
router.push({name: 'user', params: {userID: 123}})
}
}
}).$mount('#app')
</script>
</body>
</html>6.命名视图
同时(同级)展示多个视图<router-view>没有设置name，默认为default
一个视图使用一个组件渲染
对于同一个路由，多个视图需要多个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<router-link to="/">/</router-link>
<router-link to="/other">/other</router-link>
</p>
<!--模板-->
<router-view class="view one" name="c"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>
<script type="text/javascript">
// 定义路由组件，也可以引入
const Foo = {
template: '<h2>Hello Foo</h2>'
};
const Bar = {
template: '<h2>Hello Bar</h2>'
};
const Baz = {
template: '<h2>Hello Baz</h2>'
};
// 创建router实例
const router = new VueRouter({
routes: [
{
path: '/',
components: {
c: Foo,
a: Bar,
b: Baz
}
},
{
path: '/other',
components: {
c: Foo,
a: Bar,
b: Baz
}
}
]
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>7.重定向和别名
(1)重定向
重定向的目标是一个绝对路径/重定向的目标是一个命名的路由
重定向的目标是一个方法，动态返回重定向目标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<router-link to="/foo">Foo-->Bar</router-link>
<router-link to="/bar">Bar</router-link>
</p>
<!--模板-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义路由组件，也可以引入
const Foo = {
template: '<h2>Hello Foo</h2>'
};
const Bar = {
template: '<h2>Hello Bar</h2>'
};
// 创建router实例
const router = new VueRouter({
routes: [
{
path: '/foo',
redirect: '/bar' // 重定向
},
{
path: '/bar',
component: Bar
}
]
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>(2)别名
自由地将UI结构映射到任意的URL，而不是受限于配置的嵌套路由结构<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<router-link to="/foo">Foo-->Bar</router-link>
<router-link to="/bar">Bar</router-link>
</p>
<!--模板-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义路由组件，也可以引入
const Foo = {
template: '<h2>Hello Foo</h2>'
};
const Bar = {
template: '<h2>Hello Bar</h2>'
};
// 创建router实例
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
alias: '/bar' // 别名
},
{
path: '/bar',
component: Bar
}
]
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>8.向路由组件传递props
(1)路由组件传参
与$route耦合<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<router-link to="/user/lp">User</router-link>
</p>
<!--模板-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义路由组件，也可以引入
const User = {
template: '<h2>Hello LP</h2>'
};
// 创建router实例
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>使用props解耦
这样就可以在任何地方使用该组件，使得该组件更易于重用和测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text</title>
<script type="text/javascript" src="../../vue/vue.js"></script>
<script type="text/javascript" src="../../vue/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello YJ</h1>
<p>
<router-link to="/user/lp">User</router-link>
</p>
<!--模板-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义路由组件，也可以引入
const User = {
props: ['id'],
template: '<h2>Hello LP</h2>'
};
// 创建router实例
const router = new VueRouter({
routes: [
// 对于包含命名视图的路由，你必须分别为每个命名视图添加props选项
{
path: '/user/:id',
component: User,
props: true
}
]
});
// 4.创建和挂载根实例
const vm = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>(2)布尔模式
如果props被设置为true,route.params将会被设置为组件属性(3)对象模式
如果props是一个对象，route.params被按照原样设置为组件属性(4)函数模式
创建一个函数返回props，可以将参数转换成另一种类型，将静态值与基于路由的值结合
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue的路由动态重定向和导航守卫
- Vue的路由动态重定向和导航守卫实例
- vue动态路由匹配，路由传参
- vue router学习之动态路由和嵌套路由详解
- vue动态路由匹配实例
- b0b2 vue 路由之间传值 （编程式导航）
- 菜鸟黑客的第一天——一些基础的手法
- Vue------第五天（关于组件的一些基础了解，包括组件的注册、Prop、自定义事件、使用插槽分发内容等）
- Linux一些基础知识——第一天
- 深入简出vue路由——4.编程式的导航
- 图论小结（一）包括一些最短路，最小生成树，差分约束，欧拉回路，的经典题和变种题。强连通，双连通，割点割桥的应用。二分匹配，KM，支配集，独立集，还有2-SAT。
- 小白入门angular-cli的第一次旅程（学习目标 学习目标 1. 路由基础知识 重定向路由）
- 【Linux基础学习之三】Bash的一些基础知识总结（通配符、重定向、管道、命令补全）
- ABAP report常用的一些语句用法（包括字符串操作，变量动态操作）（持续更新）
- 苏嵌第一天，shell中一些基础知识
- 深入简出vue路由——2.路由动态匹配
- 全面解析vue router 基本使用(动态路由，嵌套路由)
- Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录
- vue开发：vue动态路由匹配
- 路由交换基础（二）——三层交换技术及动态路由