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

2021-05-15 13:03:18 阅读：139 来源： 互联网

标签：Vue name 跳转 js 组件 router routes 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方法是在路由进入之后触发
})

标签：Vue,name,跳转,js,组件,router,routes,Router,路由
来源： https://blog.csdn.net/lml_little/article/details/116833342

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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