路由

可参考文献 简书：https://www.jianshu.com/p/2acf9e23793a

有梦想的咸鱼前端博客：https://www.cnblogs.com/dengyao-blogs/p/11562257.html

vue2.0中router-link详解：https://blog.csdn.net/lhjuejiang/article/details/81082090

2.0   安装

官网地址：https://router.vuejs.org/zh/ 含义：Vue Router 是 Vue.js 官方的路由管理器。

它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

安装：①直接创建项目 会问你是否安装路由 你点YES就可以 ②单独下载 npm install vue-router

2.1

一级路由
路由文件中 index.js
//首先你要引入你要渲染的组件
import Index from '@/components/index'
import Detail from '@/components/detail'
//在路线中去定义一下
routes:[
{
path:'/index',
component:Index
},
{
path:'/detail',
component:Detail
},
{
path:'*',
redirect:'/index'//重定向
}
]
-------------------------
app.vue中
//渲染路由 路由出口
<router-view></router-view>
或者
<router-view />

2.2 嵌套路由

路由文件中 index.js
//首先你要引入你要渲染的组件
//一级路由
import Index from '@/components/index'
import Detail from '@/components/detail'
//二级路由
import Car from '@/components/car'
import Mine from '@/components/mine'
import Home from '@/components/home'
//在路线中去定义一下(二级路由如果不加/ 那么要带着一级路由地址)
  //routes 路线 这个数组中会有大量路线
  //当前二级路由如果地址前面加'/',那么就可以省略一级地址，在routerLink标签中，to属性='/二级路由地址'
  //当前二级路由如果地址前面没有加'/',那么在routerLink标签中，to属性='/一级地址/二级路由地址' 路由中的path也是一样 path：'/一级地址/二级路由地址'
routes:[
  {
    path:'/index',
    component:Index,
    children:[
      {
        path:'/home',
        component:Home
      },
      {
        path:'/mine',
        component:Mine
      },
      {
        path:'/car',
        component:Car
      },
      {
        path:'',
        redirect:'/home'
      }
    ]
  },
  {
    path:'/detail',
    component:Detail
  },
  {
    path:'*',
    redirect:'/index'//重定向
  }
]
---------------------
app.vue中
//渲染路由 路由出口
<router-view></router-view>
或者
<router-view />
 -------------------
 index.vue中
 //二级视图
 <router-link to='/跟path一样的地址'>首页</router-link>
  <router-link to='/跟path一样的地址'>购物车</router-link>
   <router-link to='/跟path一样的地址'>个人中心</router-link>
 //渲染路由 路由出口（二级的）
<router-view></router-view>
或者
<router-view />

 

2.3 动态路由

2.4 编程式导航

this.$router.push() 向历史记录中添加一条数据

传值的时候可以（replace和push是一个用法）this.$router.push('路径') this.$router.push({ path:'/路径', query:{key:value} })

this.$router.replace() 替换当前数据

this.$router.go(-1) 回退上一个页面

2.5 路由守卫

2.6 滚动行为

2.7 路由的零散知识点

<router-link>组件支持用户在具有路由功能的应用中点击导航。

通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。

另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名

<router-link>组件的属性有：

to 、replace、 append、  tag、  active-class、 exact 、 event、  exact-active-class

1、to（必选参数）：类型string/location

表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象

2、tag

类型: string

默认值: "a"

如果想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link :to="'index'"
tag="li"
event="mouseover">Home
</router-link>
如果此时我们想要在这个li标签中添加a标签,如下所示，可以不为a标签添加href属性即可哦

<router-link :to="{name:'Home'}" tag="li">
<a>Home</a>
</router-link>
在这种情况下，<a> 将作为真实的链接 (它会获得正确的 href 的)，而 "激活时的CSS类名" 则设置到外层的 <li>。

3、active-class

类型: string

默认值: "router-link-active"

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

4、exact-active-class

类型: string

默认值: "router-link-exact-active"

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

5、exact

类型: boolean

默认值: false

"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子，如果当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名。

按照这个规则，每个路由都会激活<router-link to="/">！想要链接使用 "exact 匹配模式"，则使用 exact 属性：

6、event
类型: string | Array<string>

默认值: 'click'

声明可以用来触发导航的事件。可以是一个字符串。

<router-link to="/document" event="mouseover">document</router-link>
如果我们不加event，那么默认情况下是当我们点击document的时候，跳转到相应的页面，但当我们加上event的时候，就可以改变触发导航的事件，比如鼠标移入事

7、replace

类型: boolean

默认值: false

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

8、append

类型: boolean

默认值: false

设置 append 属性后，则在当前 (相对) 路径前添加基路径

router-view 的理解

主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。比如：

视图层：

1.  
   <div id="app">
2.  
     <router-view></router-view>
3.  
   </div>

路由定义：

1.  
   router.map({
2.  
     '/foo': {
3.  
       // 路由匹配到/foo时，会渲染一个Foo组件
4.  
       component: Foo
5.  
     }
6.  
   })

初始化实例:

1.  
   // start app
2.  
   var App = Vue.extend({})
3.  
   router.start(App, '#app')

当你访问 /foo 时，router-view 就被 Foo 组件替换了。

组件的嵌套，一样的逻辑，看下文档和demo吧。路由嵌套

小坑一把：https://www.jianshu.com/p/cf2fb443620f

原文地址：https://www.cnblogs.com/3526527690qq/p/12422948.html