Vue-Router

Posted 2020-11-26 depthch

在模块项目中下载 vue-router 执行命令

npm install vue-router

cnpm install --save vue-router

　

创建 vue-router 和使用 

　　文件结构: 项目 --> src --> router --> index.js

 

index.js

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import Home from ‘../views/Home.vue‘

Vue.use(VueRouter)

const routes = [
  {
    path: ‘/‘,
    name: ‘Home‘,
    component: Home,
    children:[
        {
            path: ‘play‘,
            name: ‘Play‘,
            component: Play,
        }
    ]
  },
  {
    path: ‘/about‘,
    name: ‘About‘,
    component: () => import(/* webpackChunkName: "about" */ ‘../views/About.vue‘)
  },
  {
    path: ‘*‘,
    redirect: ‘Home‘
  },
]

const router = new VueRouter({
  mode: ‘history‘,
  routes
})

export default router

routers

　　-- path　　路由路径

　　-- name　　路由名称

　　-- component　　组件

　　-- redirect　　重定向到组件

　　-- children　　二级路由，跟一级路由相同结构

 

router

　　-- mode 　　默认hash，URL改变时，页面不会重新加载；history 看起来像正常的url，但是需要配置好后台

　　-- routers 　　路由数组

 

使用配置好的路由

import Vue from ‘vue‘
import Router from ‘./router‘

Vue.use(Router)

 

 

 

 

路由容器　　

<router-view></router-view>

 

动态路由　

{
    name: ‘detail‘,
    path:‘/detail/:id‘, 　　//动态路由，可以后面跟参数，如(‘/detail/123‘)
    component: Detail
}

　　-- 获取动态路由的参数(id) 　$route.params.id;

 

路由导航

　　-- 声明式导航    <router-link to="/home" tag="li" activeClass="myactive"></router-link>

 

　　-- 编程式导航

　　　　-- 路径跳转 　$router.push(‘/detail/123‘) 　　//带参数跳转路由

　　　　-- 名字跳转 　$router.push({name:‘kerwindetail‘, params:{id: 1}}) 　　//带参数跳转路由

 

 

路由守卫

　　详细: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

 　　

全局前置守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

 

to: Route: 即将要进入的目标 路由对象

 

 

from: Route: 当前导航正要离开的路由

 

 

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

 

 

组件内守卫

beforeRouteEnter　

beforeRouteUpdate

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`
  }
}

 

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。