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;

})

相关推荐
活宝小娜26 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点29 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow30 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o31 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年3 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder3 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727573 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter