vue-router（一）

配置

在router/index.js

//先引入vue文件 import home from '../components/home' //通过Vue.use安装插件 Vue.use(VueRouter); //创建VUeRouter对象 const router = new VueRouter({ routes:[ //配置路径和组件之间的映射关系 //....此处为path路径 和 component 组件 ] }) //如果数据比较多还可以使用另一种写法: const routes = [ { path: '/home', component: home }, { path: '/about', component: about } ] const router = new VueRouter({ routes })

使用

在App.vue中使用router-link 标签跳转:

<template> <div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <!--通过此标签来渲染--> <router-view></router-view> </div> </template>

<router-link>: 该标签是一个vue-router中已经内置的组件，它会被渲染成一个 <a>标签。

<router-view>: 该标签会根据当前的路径， 动态渲染出不同的组件。 和其他标签处于同一个层级。

当我们想让用户从网址进去，不用点击首页就默认跳转到首页时，我们只需要在多配置一个映射就可以了。

const routes = [ { path: '/', redirect: '/home' //我设置的home主页 } ]

此时有一个小问题：虽然路径跳转正确，渲染的组件也正确，但是路径这里多了一个 # （hash模式） 解决方法：在创建Router对象的时候之传入了一个属性，现在再加一个mode属性来改变它的默认模式为history模式：

//router/index.js const router = new VueRouter({ routes, mode: 'history'//加上mode })

重启项目之后完美解决：

router-link补充

tag:我们上面知道router-link会被默认渲染成 <a>标签 但其实 router-link 还可以被渲染成其他标签 例如： <router-link to='/home' tag = "button">首页</router-link>

replace: 在标签末尾加上replace，不会留下history记录，后退键不能返回到上一个页面中。active-class：可以改变标签的默认第二个类名： <router-link to="/about" tag="button" replace active-class="active">首页</router-link> //还有种方法：还是在router/index.js中 const router = new VueRouter({ routes, mode: 'history', linkActiveClass: 'active' //加上这个属性 这样可以给每个rout-link修改 })

通过方法改变路由

<!--可以不适用router-link标签--> <button @click="homeClick">首页</button> methods:{ homeClick(){ this.$router.push('/home')//可返回 }, //根据需求一种 homeClick(){ this.$router.replace('/home')//不可返回 } }

动态路由

还是在router/index.js中

const routes =[ { path: '/user/:userId',//要是想要在user路径下还有其他分支就添加：userId，当然：后面的名字可以随意改 component: user } ] //添加好之后就可以在router-link中修改了

此时点击用户返回的就是这个

$route此时哪个路由活跃就返回哪个。 我们在路由中"："后面设置的是什么，在this.$router.params.userId中params.后面就写什么,这样就可以返回当前活跃的路由:

//<h2>{{userId}}</h2> computed: { userId() { return this.$route.params.userId } } //这样写也可以 <h2>{{$route.params.userId}}</h2>直接获取

当我们进行npm run build后，打包的代码中js有三种: 这里我的js文件夹下出现了.map文件，这是因为在config/index.js中productionSourceMap:true设置的是true，改成false就好了

这里map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

路由懒加载

当打包构建应用时，javascript包会变得非常大，影响页面加载。 如果我们不能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了

路由懒加载主要作用时将路由对应的组件打包成一个个的js代码块。 只有在这个路由被访问到的时候才会加载对应的组件 这之前路由的用法：

import home from '../components/home' import about from '..components/about' Vue.use(VueRouter); const routes = [ { path: '/home', component: home }, { path: '/about', component:about } ];

路由懒加载:

//推荐写法： const home = () => import('../components/home') const about = () => import('../components/about') const user = () => import('../components/user') const routes = [ { path: '/home', component: home }, { path: '/about', component: about }, { path: '/user/:userId', component: user } ] //--------------------------------------------------- const routes = [ { path: '/home', component: () => import('../components/home') }, { path: '/about', component: () => import('../components/about') } ];

多了3个js文件，是把组件的抽离出来，使用时再加载。

路由嵌套

步骤：

创建对应的子组件，并且在路由映射中配置对应的子路由。在组件内部使用<router-view>router-link 的 to设置为/home/news 上代码： //router/index.js中这样配置 const routes = [ { path: '/home', component: home, //给home中再设置子映射关系 children:[ { path: '', redirect: 'news' },//再设置一个默认首页 { path: "news", component: homeNews }, { path: 'message', component: homeMessage } ] }, { path: '/about', component: about }, { path: '/user/:userId', component: user } ]

使用的时候在home添加<router-link>和<router-view>

<div> <h2>我是首页</h2> <p>我是首页内容</p> <router-link to="/home/news">新闻</router-link> <router-link to="/home/message">消息</router-link> <router-view></router-view> </div>

传参

第一个就是$touter.paramquery this.$router.push({ path: '/profile', query: { name: 'venciki', age: 20, height: 1.80 } })