路由

  1. 全局配置路由：cnpm i -S vue-router
  2. 新建一个router的文件夹，在里面新建router.js的文件2.1引入vue模块：import Vue from 'vue'2.2、引入router模块：import Router from 'vue-router'2.3、注册使用路由：Vue.use(Router)2.4引入需要定义路由的地址例如：import Rlist from '../views/compenont/list.vue'2.5、监听路由地址：const route=[{path:'自定义需要跳转的地址'，component：引入定义路由组件名字}]例如：
const routes=[
// 默认路由为登录页
{path:'/',redirect: '/login'},
// 无效地址跳转页面
{path:'/NotFound',component:NotFound},
{path:'*',redirect:'/NotFound'},
// 有效地址跳转
{path:'/list',component:Rlist},
{path:'/home',component:Rhome},
{path:'/login',component:Rlogin},
// 动态路由 -> 定义路由的时候，把需要传递的参数定义为":key"，在使用的时候，需要把:key替换为需要传递的参数
{path:'/form:id',component:Rform,name:"Rform"},
// meta参数是用于给路由添加额外属性的一种方式
{path:'/form/:id',name:'Rform',meta:'init value',component:Rform}

]

2.6、实例化路由：

const router=new Router({
routes
})


2.7、导出路由：export default router

在全局配置js文件夹中引入路由库组件import router from '文件夹地址'

3.1、在vue实例中实例化路由库组件例如：

1. new Vue({
router,
render: ce => ce(App)
}).$mount('#app')

4.在需要配置路由的页面设置：<router-view></router-view>

5.在浏览器地址栏就可以输入自定义地址进行访问

router.js文件内容

// 引入vue模块
import Vue from 'vue'
// 引入router模块
import Router from 'vue-router'
// 注册使用路由
Vue.use(Router)
// 引入需要定义路由的地址
import Rlist from '../views/compenont/list.vue'
import Rhome from '../views/compenont/home.vue'
import Rlogin from '../views/login/login.vue'
import Rform from '../views/compenont/form.vue'
import NotFound from '../views/compenont/NotFound.vue'

// 监听路由地址
const routes=[
    // 默认路由为登录页
    {path:'/',redirect: '/login'},
    // 无效地址跳转页面
    {path:'/NotFound',component:NotFound},
    {path:'*',redirect:'/NotFound'},
    // 有效地址跳转
    {path:'/list',component:Rlist},
    {path:'/home',component:Rhome},
    {path:'/login',component:Rlogin},
    // 动态路由 -> 定义路由的时候，把需要传递的参数定义为":key"，在使用的时候，需要把:key替换为需要传递的参数
    {path:'/form:id',component:Rform,name:"Rform"},
    // meta参数是用于给路由添加额外属性的一种方式
    {path:'/form/:id',name:'Rform',meta:'init value',component:Rform}

]
// 实例化路由
const router=new Router({
    routes
})
export default router
// 使用实例对象的钩子函数、导航卫士
// 路由跳转前的拦截 -- 需要传递一个函数进去，
// 这个函数会入参三个参数：去那个路由的参数对象，
// 从哪个路由跳转过来的参数对象，
// 是否允许继续执行当前跳转业务--是一个方法
router.beforeEach((to, from, next) => {
    // 如果本身就在登录页面时
   if (to.path==='/login') {
       next()
       return;
   }
//    如果一开始没有在登录页面时
   //则判断用户是否登录，可以读取缓存中的token
   let token=sessionStorage.getItem('token')
   if (!!token) {
       next()
   }else{
       next('')
   }
    
})
// 跳转之后拦截
router.afterEach( route => {
    
    
})

路由跳转和三种传参方式：

路由跳转：this.$router.push()

传参：

  1. query：{需要传递的参数：以key：value的方式进行传递}
  2. params:{需要传递的参数：以key：value的方式进行传递}
  3. meta:{需要传递的参数 ：以key：value的方式进行传递}
    *在接收参数的页面使用this.$route.query.+key的形式来接收数据

例如：

// 通过url地址的(?)query来进行参数传递
// this.$router.push('/order/form?id=' + row.id)
// this.$router.push({path: '/order/form', query: {id: row.id, name: row.name}})
// 使用路由的别名来进行路由跳转
// this.$router.push({name: 'orderForm', query: {id: row.id, name: row.name}})
// 使用动态路由来传递编码参数
// this.$router.push({ name: 'orderForm', query: {id: row.id, name: row.name}, params: {id: row.id}})
// this.$router.push({ path: /order/form/${row.id}, query: {id: row.id, name: row.name}})
// 使用meta来进行参数传递--不能重新赋值，只能定义路由的进行数据绑定
this.$router.push({ path: /order/form/${row.id}, query: {id: row.id, name: row.name}, meta: {name: row.name}})

路由中的全局导航守卫：

概念：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

  1. 前置钩子函数：
1. router.beforeEach router.beforeEach((to, from, next) => {
 ``// ...
})

参数解释：

“to”: 即将要进入的目标 路由对象;（这个对象中包含name，params，meta等属性）

"from": 当前导航正要离开的路由对象；（这个对象中包含name，params，meta等属性）

“next”: Function: 确保要调用 next 方法，否则钩子就不会被 resolved。

2.后置钩子函数：

afterEach
 
router.afterEach((to, from) => {
  // ...
})这些钩子不会接受 next 函数也不会改变导航本身：

组件内的守卫：

1. beforeRouterEnter： beforeRouteEnter(to, from, next) {
    // 因为当守卫执行前，组件实例还没被创建
  },用于必须经过A页面才可以进入b页面
2.beforeRouteUpdate：
 
beforeRouteUpdate(to, from, next) {
   
  }
 
1. beforeRouteLeave：
beforeRouteLeave(to, from, next) {
}