GoodBoy and GoodGirl~ 进来了就看完点个赞再离开, 写了这么多也不容易的~
一, 介绍
1. 概念: 路由其实就是指向的意思, 当我们点击 home 按钮时, 页面中就要显示 home 的内容, 点击 login 按钮时, 页面就显示 login 的内容, 也可以说是一种映射, 所有在页面上有两个部分, 一个是点击部分, 一个是显示部分.
2. 路由中有三个基本的概念, route,routes,router.
1.route: 它是一个路由, 是一个单数, 点击 Home 按钮 ->Home 内容
2.routes: 它是一组路由, 把每一条路由组合起来, 串接起来形成一个数组;[{home 按钮 =>home 内容},{about 按钮 =>about 内容}]
3.router: 它是一个机制, 相当于一个管理者, 来管理所有路由;
4. 客户端中的路由原理: 实际上就是 dom 元素的显示和隐藏. 当页面中显示 home 内容的时候, about 中的内容全部隐藏, 反之也是一样. 客户端路由有两种实现方式: 基于 hash 和基于 html5 history api.
二, vue 路由绑定
1. 最常用的路由绑定方式
<router-link to="/admin" class="nav-link"> 管理 </router-link>
2. 对路由 name 进行绑定
- {path:'/about',name:'aboutlink',redirect:'/about/contact',component:About}
- <router-link :to="{name:'aboutlink'}" class="nav-link"> 关于我们 </router-link>
3. 对数据进行绑定
- data(){
- return{
- menu:'/menu',
- }
- }
- <router-link :to="menu" class="nav-link"> 菜单 </router-link>
三, Vue 路由跳转
- this.$router.replace({name:'aboutlink'})
- 4.
- this.$router.push('/name')
- this.$router.push({name:'aboutlink'})
- //{name:'aboutlink'} 是路由配置是的 name 名称
- router.beforeEach((to,from,next)=>{}) // 前置守卫
- router.afterEach((to,from)=>{})
- beforeRouterEnter:(to,from,next)=>{}
- beforeRouterLeave:(to,from,next)=>{}
来源: https://www.cnblogs.com/alongup/p/9065208.html