更多优质内容
请关注公众号

Vue使用(五) vue路由(vue-router)-张柏沛IT博客

正文内容

Vue使用(五) vue路由(vue-router)

栏目:Web前端 系列:Vue的简单使用系列 发布时间:2019-12-03 17:57 浏览量:2305

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

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为


上面是vue-router官网对vue路由的介绍和定义。


下面正式介绍vue-router的基本用法,下面的介绍是基于vue-cli脚手架项目来讲解的:


如果不使用脚手架项目就要安装vue-router模块才能使用vue路由:

cnpm install vue-router --save


如果使用了脚手架项目则无需安装,它已经装好了vue路由


假如你已经在components目录下定义了两个组件 Apple.vue 和 Banana.vue ,然后在main.js引用并注册vue-router:

PS:如果是在vue-cli中,路由映射是在 /router/index.js 中写的

// # main.js
import VueRouter from 'vue-router'
import Apple from "./components/Apple"  #引入自定义组件
import Banana from "./components/Banana"

Vue.use(VueRouter)

//在实例化vue-router时定义一份映射
let router = new VueRouter({
	mode:"history",  //默认这些路由不会再浏览器的历史记录中记录的,设成history就定义可以留下历史记录
	routes:[    //定义路由映射
		{
			path:"/apple",
			component:Apple
		},
		{
			path:"/banana",
			component:Banana
		},
	]
})

new Vue({
	router,    //这里要添加上router
	el:"#app",
	...
})


<!-- Apple.Vue -->
<template>
  <div>
    Apple.vue
    
  </div>
</template>

<script>
  
</script>


然后我们在根组件中的特定位置使用

<router-view></router-view>

就能显示出对应路由的组件内容

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>


例如 我现在输入网址为127.0.0.1/apple
此时显示出的就是Apple这个组件的内容

但是整个页面只是局部是Apple的内容

这里咱们顺便说一下vue路由的hash和history这两种模式

vue-router 默认hash模式 —— 使用 URL 的 hash来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
history在url改变的时候页面时会重新加载页面

在使用hash模式的时候,url是会带一个#号的
例如 127.0.0.1/#/apple
而history模式则不会 : 127.0.0.1/apple


路由间跳转

可以使用<router-link :to="{path:'xxx'}">组件来跳转页面

<template>
  <div id="app">
    <div class="box">
        <router-view></router-view>
       <router-link :to="{path:'/apple'}">跳转到Apple页面</router-link>
      <router-link :to="{path:'/banana'}">跳转到Banana页面</router-link>
    </div>
  </div>
</template>


<router-link>组件编译后会转成<a>标签
但是跳转的时候,页面不会重新被加载


vue-router 路由参数

在router映射中定义路由规则的时候可以设定参数,例如:

routes:[
	{
		path:"/apple/:color",
		component:Apple
	}
]


:color就是参数

可以在apple子组件的内容部通过
this.$router.params
接收参数

在子组件的模板中可以直接使用
{{$router.params.参数名}}
来访问参数


嵌套路由(子路由)

现在我apple下面还有子页面,那么可以这样定义

import RedApple from "@/component/RedApple"
...
routes:[
	{
		path:"/apple",
		component:Apple,
		children:{
			path:'red',
			component:RedApple
		}
	}
]
...


此时 访问 /apple/red 就能访问到这个页面,貌似和之前定义的 apple/:color 没有什么区别,但是嵌套路由的好处是可以在apple子组件中继续插入<router-view>的路由子组件

如下:

#/src/router/index.js 

import Vue from 'vue'
import Router from 'vue-router'
import Apple from '@/components/Apple'
import RedApple from '@/components/RedApple'

Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    
    {
      path:"/apple",
      name:"apple",
      component:Apple,
      children:[
        {
          path:"red",
          component:RedApple
        }
      ]
    }

  ]
})


#App.vue

<template>
  <div id="app">
    <div class="box">
        <router-view></router-view>
      <router-link :to="{path:'/apple'}">跳转到Apple页面</router-link>
      <router-link :to="{path:'/banana'}">跳转到Banana页面</router-link>
    </div>
  </div>
</template>


#Apple.vue 
<template>
  <div>
    <div>我是苹果</div>
    <router-view></router-view>   <!--这里显示“红苹果”-->
  </div>
</template>


#RedApple.vue 
<template>
  <div>
    <div>红苹果</div>
  </div>
</template>


PS 如果你希望访问/apple的时候就能访问到redApple的内容,可以这样写:

{
  path:"/apple",
  name:"apple",
  component:Apple,
  children:[
    {
      path:"",
      component:RedApple
    }
  ]
}

只需要在children的path留空即可


================================


<router-link>的几种写法

<router-link :to="{path:'/apple'}">
或者
<router-link :to="'/apple'">
或者
<router-link to="/apple">
还可以传参
<router-link :to="{path:'/apple',param:{color:'red'}}">

具名路由
<router-link :to="{name:'apple'}">
这种情况是在定义路由的时候,在映射表中给路由加了name属性时可以这么用。

如果你希望她解析出来不是一个a标签而是一个li标签,可以这样:
<router-link to="/apple" tag="li">

在js中进行跳转:
router.push({path:"apple"})
执行到这个就会跳转到apple页面


==================================


命名视图:

我们可以在<router-view>标签中添加name属性,同一个路由针对<router-view>标签的不同的name属性可以使用不同的子组件:

<router-view name="viewA"></router-view>
<router-view name="viewB"></router-view>


在映射表中:

routes:[
	{
		path:'/apple',
		component:{
			viewA:Apple1,  #组件Apple1
			viewB:Apple2
		}
	}
]


重定向:
只需在映射表中这样:

routes:[
	{
		path:"/apple",
		redirect:"/banana"
	}
]


表示访问apple就会重定向到banana


更多关于vue-router的使用请参考vue-router官网文档




更多内容请关注微信公众号
zbpblog微信公众号

如果您需要转载,可以点击下方按钮可以进行复制粘贴;本站博客文章为原创,请转载时注明以下信息

张柏沛IT技术博客 > Vue使用(五) vue路由(vue-router)

热门推荐
推荐新闻