📑本篇内容：Vue中的路由 Router 从0 ~ 0.5 基础通晓到使用 （后端人员需要掌握的基础使用）
📘 文章专栏：前端知识（后端需掌握知识点）
前后端分离项目（Vue + SpringBoot）
🎬最近更新：2022年1月29日 Vue的生命周期入门到入坟这一篇就够了，适合后端人员的前端知识~
🙊个人简介：一只二本院校在读的大三程序猿，本着注重基础，打卡算法，分享技术作为个人的经验总结性的博文博主，虽然可能有时会犯懒，但是还是会坚持下去的，如果你很喜欢博文的话，建议看下面一行~（疯狂暗示QwQ）
🌇点赞 👍 收藏 ⭐留言 📝 一键三连 关爱程序猿，从你我做起
📖本文目录
📑Vue中的路由 Router
🚀1、Vue Router
🎁1、简介
官网生态系统的讲解
官方学习文档：Vue Router (vuejs.org)
Vue Router 可以使得现有Vue开发变得更加灵活，他可以根据前端请求URL对应在页面中的不同位置加载不同的组件。
🎁2、安装和使用
下载vue-router.js/npm进行安装
下载地址： https://unpkg.com/vue-router/dist/vue-router.js
进入网页右键另存为进行保存 vue-router.js
<script src="/js/vue.js"></script>
<script src="/js/vue-router.js"></script>
NPM安装
npm install vue-router
快速上手使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01.Vue Router的基本使用.html</title>
</head>
<body>
<div id="app">
<!--渲染路由组件的位置-->
<router-view></router-view>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.min.js"></script>
<script>
const login = {
template: `<div><h3>Login Vue Router ~</h3></div>`
}
const register = {
template: `<div><h3>Register Vue Router ~</h3></div>`
}
const router = new VueRouter({
routes:[//用来配置路由规则
{path:'/login',component:login},
{path: '/register',component: register}
]
})
const instance = new Vue({
el: '#app',
data:{},
methods:{},
computed:{},
router//注册路由
})
</script>
通过浏览器debug时我们可以看到页面结尾为#/的格式,这种通常被称之为哈希路由！~
通常的步骤划分为四步：
- 第一步：创建模板组件即
定义模板组件对象
const login = {
template: `<div><h3>Login Vue Router ~</h3></div>`
}
- 第二步：将我们
创建好的模板组件对象添加到Vue路由映射器中 必须写的是路径地址和对应的渲染组件。
const router = new VueRouter({
routes:[//用来配置路由规则
{path:'/login',component:login},
{path: '/register',component: register}
]
})
- 第三步：将我们的
路由注册到Vue实例中去
注意这里采用的是ES6的语法简写注册
const instance = new Vue({
el: '#app',
data:{},
methods:{},
computed:{},
router//注册路由
})
- 第四步：路由的
渲染位置需要在页面中标志用于渲染。
<router-view></router-view>
🎁3、Vue Router的基本语法
const router = new VueRouter({
routes:[
{path: '/',component:login},
{path:'/login',component:login},
{path: '*',component:errorpage},
]
})
path:代表的是路由路径。
component：代表的是路由映射的组件。
redirect：代表的是路由的重定向。
path： 通配符代表任意的路由*
🎁4、Vue Router中的路径切换路由
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
路由映射的对应切换通过 标签实现
其底层实现原理是通过<a>标签来实现的
<a href='#/login'></a>
上述的href的路由切换是根据哈西路由进行切换#代表从当前路由切换到/login 的路由位置
所以说 用到的方法是一致的。
上述写法是存在缺陷的，我们需要与我们的Vue实例联系起来，Vue实例中是存在router对象的，那我们将其交给Vue实例进行托管，去匹配路由对象进行匹配映射组件才是正确的。
<router-link :to="{path:'/login'}">登录</router-link>
<router-link :to="{path:'/register'}">注册</router-link>
<router-view></router-view>
完整写法如上。
🎁5、Vue Router 中的名称切换路由
根据名称切换路由：根据路由对象名称切换路由显示不同的组件。
- 步骤1：在对应的router中的组件映射中添加name属性。
const router = new VueRouter({
routes:[//用来配置路由规则
{path:'/login',component:login,name:'Login'},
{path: '/register',component: register,name:'Register'}
]
})
- 步骤2：在对应的中绑定好对应组件的name属性，即可按照名称来切换路由。
<router-link :to="{name:'Login'}">登录</router-link>
<router-link :to="{name:'Register'}">注册</router-link>
<router-view></router-view>
⭐6、Vue Router 中路由在JS中切换⭐
举一个小🌰：
当我们用户点击登录按钮之后，按钮触发的事件会去向服务器进行请求，拿到数据完成登陆成功操作，响应回来之后切换路由进行跳转页面。
当我们添加了VueRouter到我们的Vue实例当中，会有两个新的属性在实例中显示：
this.$router object 当前路由对象：
{path:'/login',component:login,name:'Login'}
this.$router vueRouter 代表路由管理器对象：
methods:{
login(){
console.log(this);
//this.$router.push('/login');
//this.$router.push({path:'/login'});
this.$router.push({name:'Login'});
},
register(){
console.log(this);
this.$router.push({name:'Register'});
}
}
当我们多次单击同一个路由切换时，浏览器会报错！！！
官方提供的解决方法：
1、通过抑制路由警告方式来进行，防止报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location){
return originalPush.call(this,location).catch(function (err) {
err;
})
}
⭐7、Vue Router 数据参数传递⭐
地址栏传递参数的两种方式:
- queryString ?
<router-link :to="{path:'login?username=alascanfu&password=123456'}">登录</router-link>
<router-link :to="{name:'Login',query:{username:'alascanfu',password:'123456'}">注册</router-link>
可以通过 this.$route.query.key 来获取指定key的参数值。
- restful 路径传递参数
<router-link :to="{path:'register/201901094106'}">登录</router-link>
<router-link :to="{name:'Register',params:{id:201901094106}}">注册</router-link>
可以通过 this.$route.params.key
const router = new VueRouter({
routes:[//用来配置路由规则
{path:'/login/:username/:password',component:login,name:'Login'},
{path: '/register/:id',component: register,name:'Register'}
]
})
⭐8、Vue Router 嵌套路由⭐
嵌套路由从何而来呢？为什么会有嵌套路由？
我们不可能一个视图页面上只展示一个组件塞！我们更多地时候是期望显示外部边框组件的同时，根据内部需求变化显示的内容组件+外部边框组件。
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03.Vue Router的嵌套路由官网使用</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.min.js"></script>
<script>
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const UserProfile = {
template: `
<div class="user">
<h3>UserProfile {{ $route.params.id }}</h3>
</div>
`
}
const UserPosts = {
template: `
<div class="user">
<h3>UserPosts {{ $route.params.id }}</h3>
</div>
`
}
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
}
]
}
]
})
new Vue({
el: '#app',
router
})
</script>
注意：嵌套的路径path无需再写/，主要依靠的是路由对象中的child[]属性惊醒配置，要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
🙊2、总结
本次小付将二刷Vue Router的时候的笔记再次进行了简单整理，结合着官方文档走了一遍后端人员需要掌握的基础使用，对使用的加深，可以结合部分框架快速搭建网站，这一块方面就是要多加练习，才能了解并且熟知VueRouter的使用。
扫一扫
3849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
