vue-路由.总结

8.1 Vue-路由

安装路由

yarn add vue-router

路径和组件的映射关系

作用:切换业务场景

优点:

整体不刷新页面,永无体验好

数据传导容易,开发效率高

缺点:

开发成本高,

首次加载缓慢,不利于seo排名

单页面应用

所有的业务都在一个页面编写

8.1.1 vue-router

包

8.1.1.1 组件分类

页面组件 views文件中

复用组件 components文件中

使用规则

import VueRouter from 'vue-router'

import Find from '@/views/find'

import My from '@/views/my'

import Part from '@/views/part'

// 使用路有插件

Vue.use(VueRouter)

// 创建路由规则

const routes = [

{ path: '/find', component: Find },

{ path: '/my', component: My },

{ path: '/part', component: Part },

]

const router = new VueRouter({

routes,

})

Vue.config.productionTip = false

Vue.directive('focus', {

inserted(