Vue--第五天

路由实操

1.抽离路由：

代码修改部分：

router,存放index.js：

import Find from '../views/Find'

import My from '../views/My'

//import Friend from '../views/Friend'  //修改成绝对路径

//一般推荐是下面的这种写法，有利于书写和配置

import Friend from '@/views/Friend'

 

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter) // VueRouter插件初始化

 

//创建了一个路由对象

const router = new VueRouter({

    // routes 路由规则们

    // route  一条路由规则 { path: 路径, component: 组件 }

    routes: [

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

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

        { path: '/friend', component: Friend },

    ]

})

export default router

main.js部分：

import Vue from 'vue'

import App from './App.vue'

import router from './router/index'

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

  router:router,

}).$mount('#app')

2.导航链接（声明式导航）：

这个就是 a 标签，只不过他简写了。还原的时候别犯迷糊。

自定义激活类名：

3.路由传值：

JS比直接在模板中书写多一个  this，查询query，动态params

动态路由传参（路由传参的动态改写）：

修改部分：

对比：

4.路由重定向（有点像默认路由设置）：

配置404：

路由配置从上到下，如果没有匹配组件，则可以匹配404

新建组件，导入后使用

模式设置（去除#号）：

5.编程式导航：

跳转：

第一种：

第二种（根据路由名跳转）：

传参：

所有代码：在routerLinkTwo中

6.案例：面试经验基础班

组件缓存：

可选择属性配置

小知识点：被缓存钩子函数是无效的，此时需要自带的钩子

这样改才对：

代码在：面试经验基础版

7.自定义创建项目

创建项目:

默认项目包含：Babel,Eslink,我们还需勾选Router , Css pre-processors,Linter / Formatter

按照以下步骤:

代码规范处理：