十二.Vue.js路由Vue Router使用

vue router 主要用于url地址配置,实现更改浏览器历史访问记录、页面跳转、页面跳转不刷新、页面访问权限拦截、滚动条滚动到指定位置、设置界面title等功能。

1. 如何使用vue router?

  • 引入vue-router核心脚本  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  • 创建路由组件,简单理解为创建两个界面
  • 配置路由映射(组件和路径映射关系),通过 new VueRouter() 配置路由,然后挂载到 new Vue() 上
  • 使用路由 <router-link><router-view>

<router-link>属性:to(跳转路径、参数配置。

to="home"
:to="{ name: 'user', params: { userId: userId }}"
:to="{ path: 'register', query: { plan: 'private' }}"

// params传参,一定要name,query可以配合name或path使用
query路径:/login?id=10&name=li
params路径:/login/10/li

// replace或调用router.replace
<router-link :to="{ path: '/abc'}" replace></router-link>

// append添加当前路径拼接,如当前路径为/a,则最新路径为/a/abc
<router-link :to="{ path: '/abc'}" append></router-link>

// tag渲染当前标签,即<li></li>
<router-link :to="{ path: '/abc'}" tag="li"></router-link>

)、replace、append、tag、active-class、exact、event

 

<!DOCTYPE html>
<html>
    <body>
        <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>
    </body>
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
       // 1. 定义(路由)组件。
        // 可以从其他文件 import 进来
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }
 
        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器,
        // 或者,只是一个组件配置对象。
        // 我们晚点再讨论嵌套路由。
        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>
</html>

 

 

2. vue-router使用及配置

通过 new VueRouter({}) 去构建路由对象,配置参数有: routes、mode、base、linkActiveClass、linkExactActiveClass、scrollBehavior、parseQuery/stringQuery、fallback

  • routes
var routes = [{
    path: string,  // 路由路径,相对路径(不带'/')会拼接父级路由,绝对路径(带'/')是配置的完整路由
    component: Component, // 组件,把组件放在<router-view></router-view>标签显示
    name: string, // 命名路由,当有多个组件routes对象时可显示多个<router-view></router-view>、用于pramas传参的引入 pramas必须用name来引入 
    components: { [name: string]: Component }, // 命名视图组件
    redirect: string | Location | Function, // 地址重定向
    props: boolean | Object | Function, // 组件参数
    alias: string | Array<string>, // 使用路由别名
    children: Array<RouteConfig>, // 嵌套路由
    beforeEnter: (to: Route, from: Route, next: Function) => void, // 进入某个页面前
    meta: any, // 面包屑、到此路由所需要的 权限 角色、路由是否采用 缓存、此路由进入页面的标题等信息
    caseSensitive: boolean, // 匹配规则是否大小写敏感?(默认值:false)
    pathToRegexpOptions: Object // 编译正则的选项
}];
  • mode 路由模式:

      histroy:localhost:8080/user/list

      hash:localhost:8080/#/user/list(默认)

  • base,基本的路由请求的路径,设置后路由自定加,如:base: '/app/',url之后加上/app/
  • linkAvtiveClass, 选中样式,还可以配置<router-link>标签属性'active-class'使用或exact
  • linkExactActiveClass,和linkActiveClass使用一样,区别在于linkExactActiveClass在精准配置,必须匹配所有路径
  • scrollBehavior,滚动行为

3. 路由实例方法使用 ,对路由历史操作有: router.currentRoute、router.push、router.replace、router.go、router.back、router.forward,对路由跳转过程拦截有:router.beforeEach、router.beforeResolve、router.afterEach

  • 历史操作:

       router.currentRoute:获取当前路由信息

      router.push: 相当于历史记录添加一条记录

      router.replace:历史路由替换

      router.go:跳转到指定第几个路由

      router.back:跳转返回第几个路由

      router.forward: 向前跳转第几个路由

  • 跳转拦截:
router.beforeEach((to, from, next) => { 
// to:进入路由对象、form:当前导航即将离开的路由,next:执行完了
    let token = router.app.$storage.fetch("token");
    let needAuth = to.matched.some(item => item.meta.login);
    if(!token && needAuth) return next({path: "/login"});
    next();
})

router.beforeResolve((to, from, next) => {
  // 和before一样
})

router.afterEach((to, from) => {
    // router方法是在路由进入之后触发
})

 

上一篇:router的安装和基本配置


下一篇:Vue-router的基本使用(创建--动态跳转)