Vue-Router

旧时模样 提交于 2020-03-17 14:53:11

在模块项目中下载 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 这个钩子。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!