阅读 44

【Vue】014. Vue-Router(二)—— 路由配置

01. 路由的基本使用

(1)路由定义

  • 路由的定义:

    // 第一步:引入必要的文件
    import Vue from 'vue' // 加载全局组件时,都需要引入Vue
    import VueRouter from 'vue-router' // 引入vue-router
    
    import Home from '@/components/home' // 引入在路由中需要用到的组件
    import About from '@/components/About'
    复制代码
    // 第二步:加载Router
    Vue.use(Router) // 加载全局组件Router
    复制代码
    // 第三步:配置路由实例 routes
    const routes = [
        {
            path: '/home',
            name: 'Home', // 给路由命名,设置的name要唯一!
            component: Home // 就是第一步import的组件
        },
        {
            path: '/about',
            name: 'About',
            component: About
        }
    ]
    复制代码
    // 第四步:配置 Router
    const router = new VueRouter({
        routes
    })
    复制代码
    // 第五步:导出路由文件
    export default router
    复制代码

(2)组件配置

  • 在vue组件内配置<router-link><router-view>

    • router-link
      • 映射路由,就是创建a标签来定义路由导航的链接(用户通过点击实现跳转)
      • 通过to属性指定目标地址,默认渲染成带有正确链接的<a>标签
    • router-view
      • 就是在标签内渲染你路由匹配到的视图组件
      • router-view支持嵌套router-view
    <template>
        <div>
            <router-link to="/home"></router-link>
            <router-link to="/about"></router-link>
            <router-view>匹配到的路由将显示在这里,且这一对标签之间的内容不会显示在页面</router-view>
        </div>
    </template>
    复制代码

(3)引入挂载

  • main.js文件中引入挂载

    //main.js文件中引入
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import router from './router'
    
    Vue.use(VueRouter); //挂载属性
    
    new Vue({
        el: '#app',
        router, // 让vue知道我们的路由规则
        render: h => h(App),
    })
    复制代码

02. routes配置项

(1)嵌套路由children

  • 通过children属性来定义当前路由的嵌套路由

    • 且,在其父级路由对应的组件中,还需要添加<router-view>,用于展示子路由
    const routes = [
        {
            ...
            // 配置子路由
            children: [{
                // 这里的参数配置与之前的路由配置没有区别
                path: '/child',
                name: 'Child',
                // 还可以在子路由里嵌套子路由
                children:[
                    {...},
                    {...}
                ]
            }]
        },
    ]
    复制代码

(2)重定向redirect与别名alias

  • 通过redirect属性来进行重定向路由

    redirect可以是一个路径、一个命名路由、一个方法(动态返回)

    重定向就是拦截路由path,然后替换url,并跳转到redirect指定的路径/路由

  • 通过alias属性来配置路由的别名

    配置别名后的路由相当于有了两条路径,访问任何一个路径,实际上指向同一个路由

    const routes = [
        {
            // 当访问 [/home]时,会重定向到 [/another]
            path: '/home',
            redirect: '/another', 
        },
        {
            // 当访问 [/else] 时,实际上访问的是 [/about],但地址栏 url 显示为 [/else]
            path: '/about',
            alias: '/else'
        }
    ]
    复制代码

(3)路由懒加载

  • 通过Vue的异步组件和Webpack的代码分割功能,来实现路由组件的懒加载(按需加载)

    使用懒加载对页面组件进行划分,在使用时才加载对应的组件,以减少首页的加载时间,优化用户体验

    const Home = () => import('@/components/home')
    const routes = [
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/about',
            name: 'About',
            component: () => import('@/components/about')
        }
    ]
    
    复制代码
  • (官方)把组件按组分块:将路由下的所有组件都打包在同个异步块 (chunk) 中

    Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中

    const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
    复制代码

(4)路由元信息meta

  • 定义路由时,每个路由都可以配置一个meta字段,可以在其中设置一些自定义信息,以供页面组件或者路由钩子函数使用

    const routes = [
        {
            path: '/home',
            name: 'Home',
            meta: {
                title: 'Home Page'
            }
        },
        {
            path: '/about',
            name: 'About',
            meta: {
                title: 'About Page'
            }
        }
    ]
    复制代码

03. new VueRouter配置项

(1)routes

  • 路由配置项

(2)mode

  • 用于配置路由的模式,默认值为hash模式,可配置为history模式

    区别(详细区别请看第一章):

    hash模式: localhost:8080/#/user/list

    history模式: localhost:8080/user/list

    const router = new VueRouter({
        // 路由模式:默认为hash,可配置为 history
        mode: 'history', 
        routes
    })
    复制代码

(3)base

  • 用于配置页面的基础路径,默认为/

    配置基路径后,如base: ‘/app/’,表示当前页面的应用服务在/app/路径下

    此时,那么访问 /app和访问 / 是一样的,因为所有请求都会自动在URL之后加上/app/

    const router = new VueRouter({
        // 可以根据开发环境配置...
        base: process.env.NODE_ENV === "production" ? "/app/" : "/",
        routes
    })
    复制代码

(4)scrollBehavior

  • 用于控制,在页面跳转后页面的滚动行为

    const router = new Router({
        routes,
        scrollBehavior (to, from, savedPostion) {
            // to:表示要前往的路由;from:表示从哪个路由来 —— 都是路由对象
            // savedPosition 在使用 浏览器的前进/后退按钮时才可用
            if (savedPostion) {
                return savedPostion // return 返回的是 期望滚动到的哪个位置
            } else {
                return { x: 0, y: 0 } // 回滚到顶部
            }
        }
    })
    复制代码

本人前端小菜鸡,如有不对请谅解

文章分类
前端
文章标签