认识vue-router

最新推荐文章于 2025-09-05 11:22:47 发布

Vincent8080

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5b8690ce51882542bf034318

本文介绍了前端路由相关知识。路由是url与网页或处理函数的对应关系，前端路由可无刷新跳转，减轻服务器压力。常见实现方式有hash路由和history，前者兼容性好，后者路径直观。还讲解了vue-router中路由的实现、配置知识点，如动态路由匹配、嵌套路由等，以及导航卫士的使用。

什么是路由

对于用户来说，路由就是浏览器地址栏中的url与所见网页的对应关系。访问一个地址,便会执行相应的页面.

对于web开发人员来说，路由更像是url与处理函数的对应关系。

前端路由

前端路由的出现基本上等于把整个前台都交给了前端来处理,通过检测url的变化,展示不同的页面给用户,跳转页面的过程可以做到无刷新,减少了服务器对于过多请求承担的压力. 更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：

利用URL中的hash（“#”）

利用History interface在 HTML5中新增的方法

前端路由的实现

比较常见的实现方式包括:

1.hash路由

hash路由一个明显的标志是带有#,我们主要是通过监听url中的hash变化来进行路由跳转。 hash的优势就是兼容性更好,在老版IE中都有运行. 并且不需要在服务器端做任何修改. 很多框架的路由就是基于hash实现的.

2.history

HTML5中history对象上新的API，同样能实现前端的路由。通过pushState()方法或replaceState()方法可以修改url的地址，并在popstate事件中能监听地址的改变，不同的是，手动的进行pushState()并不会触发popstate事件。

两种方式对比，基于Hash的路由，兼容性更好；基于History API的路由，则更正式，可以设置与当前URL同源的任意URL，路径更直观。另外，基于Hash的路由不需要对服务器做改动，基于History API的路由需要对服务器做一些改造，配置不同的路由都返回相同的页面。

vue-router 中路由的实现方式

在vue-router中,一个最基本的路由包含以下配置:

var routers = [
  {
    path: 'tab1',
    component: {
      template: `<h1>首页</h1>`
    },
  },
  {
    path: 'about',
    component: {
      template: `<div><span>hello</span></div>`
    },
  },
]

var router = new VueRouter({
  routers
})

new Vue({
  el: '#app',
  router: router
})
复制代码

vue-router中配置路由的知识点

设置路由的跳转方式，无论是哪种模式改变路由都不会重新加载页面,

mode 表示路由的配置模式:两种

hash 模式（默认）:使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。（在当前页面的 url 后面加上路径）
history 模式: 通过history 完成 URL 跳转。（当前目录底下的路径跳转）

//创建路由实例 const router = new VueRouter({
mode: 'history',//跳转页面
routes
})
复制代码

动态路由匹配

有时候我们需要我们的url变成动态的,比如url后面跟随用户的id,这种情况我们需要在配置中写入:

{ path: '/user/:id', component: User }

路径后面 + :表示这里的参数是动态获取的,这里如何获取到参数的,如下

<router-link to="/user/李栓蛋">李栓蛋</router-link> user/后面的值都会被path:'user/:id获取到

template:<div>我叫{{$route.params.id}}</div>//我叫李栓蛋

嵌套路由

路由可以有多层构成,也就是一个组件的路由中嵌套另一个组件(路由套路由),写法一样,只不过是嵌套在组件里面.

{

path::"/home",

component: home,

children:[

     {  path:"/user",  component:user } 

  ]

} 
复制代码

嵌套路由适用于url的参数是动态获取的场景.因为这种情况下的路径不能写为固定值.

命名路由

{

path: "/user/:id",

name:user,

component:"user",

component:user

}

<router-link   to = "user/25">  user </router-link>

<router-link  :to = { name：＂user＂, params :{ id : 25 }}>  user </router-link>

／／ 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

复制代码

命名视图

创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。

<router-link to="/">/</router-link>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
复制代码

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: { //components是复数
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
复制代码

在<router-view>中添加name,当匹配到路由的时候便会显示对应的视图,没有匹配到的则不显示.

导航卫士

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

前置守卫

const router= new VueRouter({...})
router.beforeEach((to,form,next)=>{
  next()
})
复制代码

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由.
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

后置守卫

router.afterEach((to,form)=>{
  ...
})
复制代码

与前面对应的,后置守卫是在路由访问之后要执行的操作,另外,后置守卫没有next参数

路由独享的守卫,使用beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
复制代码

转载于:https://juejin.im/post/5b8690ce51882542bf034318