vue-router路由使用

vue-router路由使用

现在的应用都流行SPA应用（single page application）

传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候受网络、性能影响，浏览器会出现不定时间的空白界面，用户体验不好。

单页面应用就是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。

Vue中会使用官方提供的vue-router插件来使用单页面，**原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）****

简单路由实现

下载路由插件：

cnpm install vue-router -S

1. 引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过Vue.use来注册插件

   src/router/index.js

// 引入router
import Vue from 'vue'
import Router from 'vue-router'
// 文件路径
import Films from "@/views/Films"
import Center from "@/views/Center"
import Cinema from "@/views/Cinema"
// 通过Vue.use方法来使用插件
Vue.use(Router)

1. 创建router路由器(简写)

new Router({
routes:[
{path:"/home",component:Home}
]
})

1. 创建路由表并配置在路由器中

var routes = [
{  path:"/films",    //url地址栏的路径
component:Films,   //根据url地址栏的路径所映射的路由视图组件
},
{
path:"/center",
component:Center
},
{
path:"/cinema",
component:Cinema
},
]

new Router({
routes
})

1. 在根实例里注入router,目的是为了让所有的组件里都能通过this.$router、this.$route来使用路由的相关功能api

src/main.js

import Vue from 'vue'
import App from './App.vue'
//引入router的实例
import router from "./router"
Vue.config.productionTip = false

new Vue({
render: h => h(App),
router  //目的？让我们的组件上面可以访问到路由相关的api($route/$router)
}).$mount('#app')

1. 利用router-view来指定路由切换的位置

<router-view></router-view>

1. 使用router-link来创建切换的工具，会渲染成a标签，添加to属性来设置要更改的path信息，且会根据当前路由的变化为a标签添加对应的router-link-active/router-link-exact-active（完全匹配成功）类名

   src/APP.vue

   组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

<router-link tag="li" to="/films" active-class="active">电影</router-link>
<router-link tag="li" to="/cinema" active-class="active">影院</router-link>
<router-link tag="li" to="/center" active-class="active">我的</router-link>
.router-link-active{
color:red;
}

多级路由

在创建路由表的时候，可以为每一个路由对象创建children属性，值为数组，在这个里面又可以配置一些路由对象来使用多级路由，注意：一级路由path前加'/'

const routes = [
{
path:"/films",    //url地址栏的路径
component:Films,   //根据url地址栏的路径所映射的路由视图组件
children:[
{
name:'now',
path:"/films/nowplaying",
component:Nowplaying
},
{
path:"comingsoon",
component:ComingSoon
},
]
},
{
path:"/center",
component:Center
},
{
path:"/cinema",
component:Cinema
},
{
path:"/detail",
component:Detail
},
{
path:"/",  //默认路由
redirect:"/films"
},
// {
//     path:"*", //上述路由都没有匹配上的话就进入，然后重定向到/films/nowplaying
//     redirect:"/films"
// }
]

二级路由组件的切换位置依然由router-view来指定（指定在父级路由组件的模板中）

<router-link to='inside'>inside</router-link>
<router-link to='outside'>outside</router-link>

<router-view></router-view>

默认路由和重定向

当我们进入应用，默认像显示某一个路由组件，或者当我们进入某一级路由组件的时候想默认显示其某一个子路由组件，我们可以配置默认路由：

{path:'',component:Main}

当我们需要进入之后进行重定向到其他路由的时候，或者当url与路由表不匹配的时候：

{path:'/',redirect:'/main'}
///...放在最下面
{path:'*',redirect:'/main'},

命名路由

我们可以给路由对象配置name属性，这样的话，我们在跳转的时候直接写name:main就会快速的找到此name属性对应的路由，不需要写大量的urlpath路径了

<template>
<ul>
<router-link
v-for="nav in navList"
:key="nav.id"
:to="nav.path"
tag="li"
active-class="active"
>{{nav.title}}</router-link>
</ul>
</template>
navList:[
{id:1,title:"电影",path:"/films"},
{id:2,title:"影院",path:"/cinema"},
{id:3,title:"个人中心",path:"/center"}
]

声明式导航 router-link

组件支持用户在具有路由功能的应用中（点击）导航。

router-link的to属性，默认写的是path（路由的路径），可以通过设置一个对象，来匹配更多

:to='{name:"detail",params:{id:_new.id},query:{content:_new.content}}'

name是要跳转的路由的名字，也可以写path来指定路径，但是用path的时候就不能使用params传参，params是传路由参数，query传queryString参数

replace属性可以控制router-link的跳转不被记录

active-class属性可以控制路径切换的时候对应的router-link渲染的dom添加的类名

编程式导航

有的时候需要在跳转前进行一些动作，router-link直接跳转，需要在方法里使用$router的方法

this.$router.push()

toDetail(){
//通过编程式导航跳转 (push/go/back/replace等方法实现路由跳转)
this.$router.push("/detail")
}