好程序员Web前端干货详解Vue-Router路由与

好程序员Web前端干货详解Vue-Router路由与配置

程序员Web前端干货详解Vue-Router路由与配置，现在的很多应用都流行SPA应用（singe page application) 。传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候因受到网络、性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。而单页应用则是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。而在vue2.0版本后，vue官方推出vue-router插件来实现单页面的路由跳转，内部原理就是通过组件之间的切换（组件的卸载与安装）去实现整个页面无刷新的效果。

一．项目引入路由并配置：

1.在vue项目中，通过cnpm或者yarn的方式进行vue-router的安装

cnpm i vue-router -S

yarn add vue-router -S

2.接下来需要在入口文件main.js里面进行路由的引入与注册

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

3. 创建router路由器

new Router({

routes:[

{path:"",component:}

]

})

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

var routes=[

//path为路径，component为路径对应的路由组件

{path,component}

]

new Router({

routes

})

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

new Vue({

el: '#app',

router,

template: '<App/>',

components: { App }

})

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

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

<router-link to="main">main</router-link>

<router-link to="news">news</router-link>

.router-link-active{

color:red;

}

项目中多级路由配置：

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

const routes=[

{path:'/home,component:Home},

{path:'/list',component:List,children:[

{path:'inner',component:Inner},

{path:'outer',component:Outer}

]},

]

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

<router-link to='/home/inner'>inner</router-link>

<router-link to='/home/outer'>outer</router-link>

<router-view></router-view>

但是这样发现当路由路径多级的时候，不利于快速定位路由匹配的组件。所以，可以通过命名路由的方式去实现以上代码。

我们可以给路由对象配置name属性，当我们在跳转的时候直接写name:inner就会快速的找到此name属性所对应的路由，不需要写大量的urlpath路径了。如下所示：

{path:'inner',component:Inner,name:'inner'}

这样的话，我们就可以方便的根据路由的不同进行组件之间的映射。但是，做大型项目开发的时候，我们也会发现很多的路由写在routes这个里面，会让router这个文件变得很大不利于维护管理。除此之外，如果通过这样的方式还会导致当用户打开首页的话，因为webpack打包的时候，加载内容异常的多导致打开速度很慢。所以我们需要对我们的路由采取懒加载的方式进行引入：

const routes=[

homeRouter

]

//homeRouter.js文件里面

export defult {

Name:’homeRouter’,

Path:’/home’

component:()=> import('./my-async-component')}

}

Vue-Router的路由守卫：

在项目开发中，我们经常会在路由跳转前后做一些操作。例如我们可以通过利用vue-router里面提供的路由守卫结合axios拦截器实现项目的登录拦截等操作。Vue-router里面提供的路由守卫可以分为三大类，分别是全局路由守卫、单个的路由钩子的路由守卫、路由组件内部的路由守卫。好，我们依次来看：

通过 router.beforeEach 或者router.afterEach注册一个全局守卫：

1-1

router.beforeEach((to, from, next)=> {

//会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了

next()

})

守卫方法需要接受三个参数：to、from、next

to:即将要进入的目标对象

From:当前导航正要离开的路由

Next: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

1-2

//会在任意路由跳转后执行

Router.afterEach((to,from)=>{

})

单个路由钩子守卫：

只有beforeEnter，在进入前执行，to参数就是当前路由

routes: [

{

path: '/foo',

component: Foo,

beforeEnter: (to, from, next)=> {

// next也是必须要写的

}

]

路由组件钩子守卫：

beforeRouteEnter (to, from, next) {

//内部不能调用this 当这个路由调用时，组件没有被初始化

beforeRouteUpdate (to, from, next) {

// 内部可以访问组件实例 `this`

//路由内部动态参数改变了，组件被复用的时候调用（/list/1跳入/list/2,详情组件复用的时候）

beforeRouteLeave (to, from, next) {

// 可以访问组件实例 `this` 路由离开这个组件的时候进入

}

以上就是Vue-Router里面的核心技术点，需要在项目中不断的练习、具体到业务逻辑中使用才能更好的理解、渗透，其次多加记忆、巩固才可更加清晰。

是Vue官方插件https://router.vuejs.org/zh/guide/#html。

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

简单举例子：

声明式路由：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
 <div id="app">
 <h1>Hello App!</h1>
 <p>
 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>
 </p>
 <router-view></router-view>
 </div>
 <script type="text/javascript">
 const Foo=Vue.extend({ template: '<div>foo</div>' })
 const Home=Vue.extend({ template:'<div>没有点击link时，默认的页面</div>'})
 const Bar={
 template: '<div @click="luyou">bar</div>',
 methods: {
 luyou() {
 console.log(this.$route)
 }
 }
 }
 const routeses=[{path:'',component:Home},
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
 ]
 const router11=new VueRouter({
 routes: routeses
 })
 const app=new Vue({
 el: '#app',
 router: router11,
 mounted() {
 // this.$router.push('/')
 console.log(this.$router)
 console.log(this.$route)
 }
 })
 </script>
</body>
</html>

编程式路由：

怎么把声明式改为编程式：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>编程式导航</title>
 <script src="https://cdn.bootcss.com/vue/2.6.9/vue.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
 <style>
 button,
 .router-link{
 padding: 10px 15px;
 border: none;
 outline: none;
 font-size: 20px;
 color: #fff;
 background: linear-gradient(to right, blue, red, green);
 background-color: #000;
 }
 </style>
</head>
<body>
 <div id="app">
 <!--最初的 router-link 模式-->
 <router-link class="router-link" to="/path/RouterLink">原始路由</router-link>
 <!--使用 router.push 方法-->
 <button type="button" @click="routerPush">router.push 方法</button>
 <!--使用 router.replace 方法-->
 <button type="button" @click="routerReplace">router.replace 方法</button>
 <!--使用 router.go 方法-->
 <button type="button" @click="routerGo">router.go 方法</button>
 <router-view></router-view>
 </div>
 <script>
 // 创建一个路由组件 用于输出内容 
 const view={
 template: "<div>" +
 "<h1>我点击的是 {{$route.params.msg}}</h1>" +
 "</div>"
 }; 
 // 定义路由
 const routes=[{
 path: '/path/:msg',
 component: view
 }];
 // 创建路由实例
 const router=new VueRouter({
 routes
 });
 const app=new Vue({
 router,
 methods: {
 // 使用 router.push 替换 <router-link to="xxx"></router-link> 
 // 可点击浏览器后退按钮后退至上一步
 routerPush() {
 this.$router.push({
 path: "/path/routerPush"
 })
 },
 // 使用 router.replace 替换 <router-link to="xxx"></router-link>
 // 不可后退 
 routerReplace() {
 this.$router.replace({
 path: "/path/routerReplace"
 })
 },
 // router.go(n),接收一个整数，如果为正数则 前进 n 步，负则后退 n 步
 routerGo() {
 this.$router.go(-1)
 }
 }
 }).$mount("#app");
 </script>
</body>
</html>

这两个简单的案例搞懂了，也就懂了一点基础了。

端路由与前端路由

后端路由：应用程序如何去处理不同的url地址发送过来的请求。

前端路由：不同的url地址要渲染不同的页面效果出来。

后端路由与前端路由最本质的一个区别：前端路由只处理 GET 请求。

vueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的链接

HTML5 历史模式或 hash 模式，在 IE9 中自动降级

自定义的滚动条行为

使用vueRouter

在 Vue 核心之后引入 VueRouter

准备路由页面组件（跟路由相关的组件，就叫做路由页面组件）

components: {
	home: {
	   template: `<h1>home</h1>`,
	}
	...多个
}

定义路由的规则 routes ，是一个数组对象

const routes=[
        // 一个对象就是一条路由规则
        {
          // 每一条规则有一些配置项，主要的是 path 和 component
          //      path - 路由url地址，一般是#号后面的部分
          //      component 使用哪个路由页面组件去渲染，
          //                不能是组件名字的字符串
          //                可以直接提供一个包含组件配置项的对象即可
          //      name  推荐任何组件都设置一个 name 的选项这个选项就是给组件取个名字
          path: "/home",
          name: "home",
          component: home,
        }
        ...多个
]

实例化路由对象, 使用new VueRouter()生成一个 router 实例

new Vue({
// 配置一个 router 选项
 router,
});

需要在某个位置，放置一个路由视图（路由坑，就是用来填充匹配的路由页面组件的一个东西），路由视图本身是 VueRouter 提供的一个全局的组件 router-view 这时url地址与某个路由规则匹配时，就会将相应的路由页面组件渲染到这个 router-view 上

<div id="app">
      <router-view></router-view>
    </div>

路由模式

Vue 中路由有两种不同的模式

hash 模式（默认模式）

使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

hisotry 模式

history模式是基于最新的HTML5里面history相关的api进行的一些操作。不过这种模式要玩好，还需要后台配置支持不然会出现404找不到页面这种问题。history模式时，重定向会有些问题，需要页面的名字叫index.html才行。history模式只能兼容到IE10及以上。

在 new VueRouter() 的时候，配置 mode 选项就可以切换模式

const router=new VueRouter({
	// 路由模式，只能从 hash 与 history 中选择一个
	mode: "history",
    routes
});

声明式导航 (用 router-link 来控制路由跳转)

与 router-view 一样，都是引入了 vue-router 之后，提供的全局组件

router-link 的作用就是实现路由的跳转（url的跳转）它本质上就是一个a标签。我们推荐使用它，而不是去用a标签来跳转。

语法：

<router-link to="/home">home</router-link>
to 属性是必须的用来设置点击时跳转到哪里

使用 router-link 就不需要去写 # 号了，它会根据当前路由的模式来决定最终渲染出去的a标签的href属性有没有 # 号。

默认情况下当前的路由地址与某个router-link的to属性匹配时，会给渲染出去的a元素添加上两个 class ，可以使用这两个中的任意一个操作css 样式，这能够更方便的去实现高亮效果。

router-link-exact-active

router-link-active

也可以设置 router-link 组件的 active-class 属性，属性值为某个class名字

希望默认的 router-link-active=> active

active-class=“active”

希望默认的 router-link-exact-active=> exact-active

exact-active-class=“exact-active”

编程式导航 (用js控制路由跳转)

$router

使用 vue-router 之后，在 vue 的原型上提供了一个 $router 对象，使用这个对象的一些方法来进行路由的跳转。

this.$router.push()

就相当于普通的 router-link 它的参数可以是：

字符串，要跳转到路由的path

对象，对象中配置 path 属性。

this.$router.replace()

就相当于带有 replace 属性的 router-link 它的参数可以是：

1. 字符串，要跳转到路由的path

2. 对象，对象中配置 path 属性。

其余的一些方法

this.$router.back()=>     后退  history.back()
this.$router.go(num)=>  前进或后退，根据传递参数是正数还是负数来决定 history.go()
this.$router.forward()=>    前进  history.forward()

push() 与 replace() 和 router-link 上的 to 属性，传递为对象时，对象有哪些属性：

path

路由重定向

name

路由别名

query

query 参数

params

params 参数

params 与 path 会产生冲突，请使用 name 和 params 结合使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

好程序员Web前端干货详解Vue-Router路由与

您的项目需求