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;

})

相关推荐
Apifox1 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞3 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行4 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758105 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周8 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队26 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js