vue项目中使用路由

路由

概念：维护页面访问路径和对应页面组件之间的关系
项目中安装路由：

npm i vue-router -S

一、路由基本使用流程

1. 导入路由模块
2. 注册插件
3. 定义路由规则数据
4. 创建路由对象
5. 导出路由对象
6. vue实例文件中挂载
7. 在根组件中通过router-view添加路由占位符
8. 在根组件中通过router-link创建路由导航链接

// 1-导入路由模块
import Vue from 'vue';
import Router from 'vue-router';
// 2-注册插件
Vue.use(Router);
// 导入页面组件
import Home from '../pages/Home';
import Login from '../pages/Login';
import Reg from '../pages/Reg';

// 3-定义路由规则数据
const routes=[
    {
        // 页面访问路径
        path:'/home',
        // 页面组件对象
        component: Home
    },
    {
        path:'/reg',
        component:Reg
    },
    // 路由重定向
    {
        path:'/',
        redirect:'/home'
    },
    // 配置404路由
    {
        path:'*',
        component: NotFound
    },
    // 命名路由
    {
        name:'home',
        // 页面访问路径
        path:'/home',
        // 页面组件对象
        component: Home,
        // 路由元信息
        meta:{
            title:'网站首页'
        }
    }
];
// 4-创建路由对象
const router=new Router({
    routes,
    // 切换路由模式: 通过mode属性切换, 可选值: history, hash, 默认值为hash
    // history: 页面访问路径中不带`#`,打包之后, 必须放到一个web服务器下, 才能正常的工作
    // hash: 页面访问路径中带`#`,打包之后，可以直接通过文件夹运行
    mode:'hash' ,
     // 自定义路由导航链接高亮的类名: 默认值link-active-class
    linkActiveClass:'active'   
});
// 5.导出路由对象
export default router;

// 在vue实例文件中
// 导入路由对象
import router from './router'
new Vue({
  el: '#app',
  template: '<App/>',
  // 6.挂载路由对象
  router
});

<!-- 7.路由占位符 路由地址匹配到的组件的渲染位置 -->
<router-view />

<!-- 8.路由导航链接
	tag: 指定渲染出来的标签, 默认会渲染`a`标签
	exact: 启用路由严格匹配模式
 -->
<router-link to="/home">首页</router-link>

<!-- 通过命名路由定义的导航链接 -->
<router-link class="btn" :to="{name:'home'}">首页</router-link>

二、基本配置

1. 路由模式：在路由对象中配置mode属性，有两个属性值；

• history: 页面访问路径中不带#，打包之后, 必须放到一个web服务器下, 才能正常的工作
• hash: 页面访问路径中带#，打包之后, 可以直接使用文件的方式来运行

2. 路由导航高亮：默认显示的路由连接会有高亮显示的样式，如果要改变高亮的样式，针对系统提供的一个动态添加的类名router-link-actvie书写对应的高亮样式即可。

// 在路由对象中自定义路由导航链接高亮的类名: 默认值link-active-class
linkActiveClass:‘active’

3. 路由重定向： 当访问a链接时，跳转到b链接；

const routes=[
    // 路由重定向
    {
        path:'/',
        redirect:'/home'
    }
]

4. 404路由配置：当用户访问路由地址不存在时，跳转到404路由；

const routes=[
    // 配置404路由
    {
        path:'*',
        component: NotFound
    }
];

5. 命名路由：给每一条路由规则通过name属性起一个名字

 // 命名路由
    {
        name:'home',
        // 页面访问路径
        path:'/home',
        // 页面组件对象
        component: Home
    }
    <router-link class="btn" :to="{name:'home'}">首页</router-link>

6. 编程式导航： this.$router

push(): 实现页面跳转, 只会在页面访问历史中添加一条记录
replace(): 实现页面跳转, 会覆盖前一次的访问历史
go(): 可以实现页面前进或者回退;正数代表前进、负数代表回退
back(): 实现页面回退
forward(): 实现页面前进

7. 动态路由：当有一些参数需要传递时就用到了动态路由；使用时通过 $route.params获取

routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]

// 调用时传参
// 写法1
<router-link class="btn" to="/login?from=baidu&ip=192.168.1.1">登录</router-link>
// 写法2
<router-link class="btn" :to="{name:'login',query:{from:'baidu',ip:'192.168.1.1'}}">登录</router-link>

8. 嵌套路由： 通常的业务场景需要由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。

routes: [
	// 将需要嵌套的路由放到component里面 
    { path: '/user/:id', component: User }
  ]

9. 路由元信息： 定义路由规则时给每个都定义页面的元信息。

const routes=[
    // 命名路由
    {
        name:'home',
        // 页面访问路径
        path:'/home',
        // 页面组件对象
        component: Home,
        // 路由元信息
        meta:{
            title:'网站首页'
        }
    }
]

10. 路由懒加载： 按需加载, 提升项目性能

// 异步加载组件: 组件懒加载
const Home=()=>import('../pages/Home');
const Login=()=>import('../pages/Login');

11. 路由匹配模式： vue中 默认执行的是路由模糊匹配: 当页面访问地址中, 包含路由path, 就认为匹配成功；启用路由严格匹配模式: 在router-link路由导航链接上, 添加exact属性即可, 一般只需要对/所在的路由导航链接启用严格匹配

三、路由导航守卫

全局守卫

1. 全局前置导航守卫（router.beforeEach()）：可以监听到所有的页面跳转、具备拦截页面跳转的功能；

router.beforeEach((to,from,next)=>{
    // 需要手动调用next, 否则所有页面将无法跳转
    console.log(to);
    if(to.path==='/order'){
        // 可以使用next进行路由重定向
        alert('暂无权限');
        return next('/home');
    }
    next();
    // 设置页面标题
    document.title=to.meta.title+"首页";
});

2. 全局解析守卫（router.beforeResolve()）：可以监听到所有的页面跳转、具备拦截页面跳转的功能、是在全局前置守卫执行之后, 才执行；

// 全局解析守卫
// to: 即将要前往的路由对象
// from: 即将要离开的路由对象
// next: 路由跳转方法
router.beforeResolve((to,from,next)=>{
    console.log('beforeResolve');
    next();
});

3. 全局后置钩子（router.afterEach()）：不具备拦截页面跳转的功能、在页面跳转完成之后, 才执行；

// 全局后置钩子
  // to: 即将要前往的路由对象
  // from: 即将要离开的路由对象
  router.afterEach((to, from) => {
  	console.log('afterEach');
  }) 

路由独享守卫: beforeEnter()。只针对某条路由规则起作用、具备拦截页面跳转的功能。

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

组件内的守卫

1. beforeRouteEnter: 在渲染该组件的对应路由前;
2. beforeRouteUpdate: 动态路由参数更新时;
3. beforeRouteLeave: 导航离开该组件的对应路由时调用;

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

四、滚动处理

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

// 创建路由对象
const router=new VueRouter({
    routes,
    mode:'hash',
    linkActiveClass:'active',
    // 自动重置页面滚动条的位置
    scrollBehavior(){
        return {x:0,y:0}
    }
});