vue-router的基本使用方法

路由

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

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

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

   例如：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. 前置钩子函数：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) {

   }