vue-router(路由)

一、安装

如果你用vue-cli脚手架来搭建项目,配置过程会选择是否用到路由(详细见vue-cli 脚手架),如果选择y,后面下载依赖会自动下载vue-router。

这里还是说一下安装:npm install vue-router

二、创建组件

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能,用vue-cli生产了我们的项目结构,src文件目录下会有一个router文件夹,此处就是编写路由组件的地方。在src/router/index.js,这个文件就是路由的核心文件:

import Vue from 'vue' //引入Vue

import Router from 'vue-router' //引入vue-router

import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件

Vue.use(Router) //Vue全局使用Router

export default new Router({

routes: [ //配置路由,这里是个数组

{ //每一个链接都是一个对象

path: '/', //链接路径

name: 'Hello', //路由名称,

component: Hello //对应的组件模板

},{

path:'/hi',

component:Hi,

children:[ //子路由,嵌套路由 (此处偷个懒,免得单独再列一点)

{path:'/',component:Hi},

{path:'hi1',component:Hi1},

{path:'hi2',component:Hi2},

]

}

]

})

二、创建组件

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能,用vue-cli生产了我们的项目结构,src文件目录下会有一个router文件夹,此处就是编写路由组件的地方。在src/router/index.js,这个文件就是路由的核心文件:

import Vue from 'vue' //引入Vue

import Router from 'vue-router' //引入vue-router

import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件

Vue.use(Router) //Vue全局使用Router

export default new Router({

routes: [ //配置路由,这里是个数组

{ //每一个链接都是一个对象

path: '/', //链接路径

name: 'Hello', //路由名称,

component: Hello //对应的组件模板

},{

path:'/hi',

component:Hi,

children:[ //子路由,嵌套路由 (此处偷个懒,免得单独再列一点)

{path:'/',component:Hi},

{path:'hi1',component:Hi1},

{path:'hi2',component:Hi2},

]

}

]

})

三、router-link制作导航

1.router-link 是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址。

注意:被选中的router-link将自动添加一个class属性值.router-link-active。

<router-link to="/">[text]</router-link>

css过渡类名:

组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name="fade",会有如下四个CSS类名:

  • fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
  • fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
  • fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
  • fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
四、动态路由匹配

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。

调用router的map方法映射路由,每条路由以key-value的形式存在,key是路径,value是组件。例如:'/home'是一条路由的key,它表示路径;{component: Home}则表示该条路由映射的组件:

router.map({

'/home': { component: Home },

'/about': { component: About }

})

五.响应路由参数的变化

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

复用组件时,想对路由参数的变化作出响应的话:

(1). watch(监测变化) $route 对象:

const User = {

template: '...',

watch: {

'$route' (to, from) {

// 对路由变化作出响应...

}

}

}

(2).beforeRouteUpdate 导航守卫

如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate来响应这个变化 (比如抓取用户信息)。

const User = {

template: '...',

beforeRouteUpdate (to, from, next) {

// react to route changes...

// don't forget to call next()

}

}

六、实现不同路由不同页面标题

// 定义路由的时候如下定义,name也可为中文

const routes = [

{ path: '/goods', component: goods, name: 'goods' },

{ path: '/orders', component: orders, name: 'orders' },

{ path: '/seller', component: seller, name: 'seller' }

];

// 创建路由实例

const router = new VueRouter({

routes: routes

})

// 关键在这里,设置afterEach钩子函数

router.afterEach((to, from, next) => {

document.title = to.name;

})

相关推荐
待磨的钝刨3 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式