Vue-Router 路由及路由嵌套的学习，缓存路由，

路由的概念

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得非常简单。
通过根据不同的请求路径，切换显示不同组件进行渲染页面。
通过nodeJs下载 Vue和vue-router

注意：通过router-link 标签会默认渲染出a标签来其中通过to属性指定跳转链接，不用带上#

简单的效果如下

运用vue-router组件的学习

效果：

第一步先用nodejs拉去vue-router

npm install vue-router

第二步建立新闻和关于我们的页面

;(function(){
const templete=``
window.News={
     templete,
}
)()

第三步建立左侧导航栏列表

第四建立路由转换

第五建立渲染的位置

第六在index.html页面引入对应的Js和加入router

效果

tag=“dev” ,active-class,exact的使用

tag
类型: string
默认值: “a”
有时候想要 < router-link > 渲染成某种标签，例如 < li> 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
router-link 默认渲染出的是a标签， tag="div"可以使用tag渲染出其他的标签，tag="div"也就是div标签

active-class

类型: string

默认值: “router-link-active”

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

exact

类型: boolean

默认值: false

“是否激活”默认类名的依据是包含匹配。 举个例子，如果当前的路径是 /a 开头的，那么 < router-link to="/a"> 也会被设置 CSS 类名。
按照这个规则，每个路由都会激活 < router-link to="/">！想要链接使用“精确匹配模式”，则使用 exact 属性：

最后实现的效果（不看第一个蓝色的，下面三个采用router-link写的tag定向的li,点到哪个哪个就成蓝色）

嵌套路由案例的学习

目的如下
实现下面的跳转


步骤一
定义体育（Sport.js）和科技（Techo.js）的两个组件

步骤二将体育和科技的li按钮修改

步骤三在路由中找到news的跳转下面，定义children属性，它和routes用法一样


在index.html中加入路由组件

缓存路由

当输入框输入值时候，切换其他页面，回来的之后输入值不会改变，将输入的组件缓存下来

使用< keep-alive>可以对渲染组件< router -view >进行缓存

路由组件传递数据

第一步先将列表通过axios数据拿到
json数据如下所示

通过axios拿到数据并将数据赋值给data定义的数组


效果如图

第二部将要转换显示的下面部分抽取成一个组件

;(function(){
const templete=`变换的组件内容`
window.Sportmain={
templete,
}
)()

第三部分在router下面进行路由配置
在news下面建立一个新的 children子组件

第四步对Sportmain组件进行操作
效果如下所示

this.$route.params.id可以拿到路由变化的id

运用

const XXX=response.data,来承接ajax获取的json数据
this.OO=XXX.find(function(detail){
//运用find方法返回一组，id与json数组id相同的一组数据
   return detail.id===this.id
)

编程式路由导航

this.$router.push(path) 相当于点击路由链接(后退1步,会返回当前路由界面)
this.$router.replace(path) 用新路由替换当前路由(后退1步,不可返回到当前路由界面)
this.$router.back()    后退回上一个记录路由
this.$router.go(n) 参数 n 指定步数
this.$router.go(-1) 后退回上一个记录路由
this.$router.go(1) 向前进下一个记录路由

参照手机端的前进后退按钮