vue-router的基本框架及写法,router-view与router-link
一.安装和使用vue-router步骤一:安装vue-router:npm install vue-router --save步骤二:在模块化工程中使用它如果使用Vuecli脚手架,在配置时选择安装,则我们可以在src文件夹中找到router文件夹,并且其中会包含index.js文件,在这个js文件中,我们将配置所有的路由相关的信息1.搭建路由框架第一步:导入路由对象,并且调用Vue.use(Vu
一.安装和使用vue-router
步骤一:安装vue-router:npm install vue-router --save
步骤二:在模块化工程中使用它
如果使用Vuecli脚手架,在配置时选择安装,则我们可以在src文件夹中找到router文件夹,并且其中会包含index.js文件,在这个js文件中,我们将配置所有的路由相关的信息
1.搭建路由框架
- 第一步:导入路由对象,并且调用Vue.use(VueRouter)
- 第二步:创建路由实例,并且传入路由映射配置
- 第三步:在Vue实例中挂载创建的路由实例
首先在router文件夹下的index.js中配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// 1.通过vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建VueRouter对象
const routes = [
]
const router = new VueRouter({
// 配置路由和组件之间的映射关系
routes // ES6的增强写法
})
// 3.将router对象传到Vue实例中
export default router
接下来在main.js的Vue实例中将路由实例挂载
new Vue({
el:'#app',
router, // ES6的增强写法,相当于router:router
render:h=>h(App)
})
2.配置路由和组件之间的映射关系
一个映射关系就是一个对象
- 第一步:创建路由组件,因为一个地址对应一个路由组件,所以必须要先创建路由组件
- 第二步:配置路由映射:组件和路径映射关系
- 第三步:使用路由:通过
<router-link>
和<router-view>
, - router-link可以生成一个可以点击的文字,最终会默认渲染成a标签,与to一起使用
- 而router-view相当于一个占位的作用,决定跳转后的内容显示在link的上方或下方
首先在components文件夹中创建.vue文件,即路由组件,创建完成后,需要在router文件夹下的index.js中导入
//index.js文件
import Home from '../components/Home' // 这里注意当前是index.js文件,所以去到components文件夹要用../
import About from '../components/About'
const routes = [
//路由和组件之间的映射关系,一个映射关系就是一个对象
{
path:'/home',
component:'Home'
},
{
path:'/about',
component:'About'
}
]
接下来因为main.js文件中挂载的是APP组件,所以需要在App.vue文件上添加link才能在html上显示
//App.vue文件
<template>
<div>
<router-view></router-view> // 占位作用
<router-link to='/home'>首页</router-link> // to后面跟上路径
<router-link to='/about'>关于</router-link>
</div>
</template>
图示:
3.路由的默认路径
通常情况下,在进入网站首页的时候,我们希望<router-view></router-view>
直接渲染首页的内容,而不是通过点击router-link再进行跳转,那么如何让路径默认跳到首页呢
只需多配置一个映射即可
const routes=[
{
path:'',
redirect:'/home' // 重定向,即最初路径为根路径时,立即重定向到/home路径
}
]
4.通过html5的history修改路径模式
默认情况下,我们修改了路径后,在上方地址栏中路径会包含#号,即hash模式
那么如何更换hash模式,变为平时看到的路径呢?
在路由实例中更改mode即可
const router = new VueRouter({
routes,
mode:'history' // 将hash模式更改为history模式
})
5.router-link的补充属性
在前面的router-link中,我们只是使用了一个属性:to,用于指定跳转的路径
它还有其他的属性:
- tag: tag可以指定router-link之后被渲染成什么组件,router-link默认会被渲染成a标签。
<router-link to='/home' tag='button'>
表示会渲染成一个button元素,而不是a标签 - replace: replace不会留下历史记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中,即默认情况下使用的是pushState
- active-class: 当router-link对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称,但通常情况会直接使用默认的router-link-active而不进行修改
//App.vue
<router-link to='/home' tag='button' replace active-class='active'>首页</router-link>
6.路由跳转代码
有的时候,页面跳转可能需要执行对应的JS代码,这个时候,就可以使用JS代码实现上述router-link跳转
//App.vue
<template>
<div>
<button @click='linkToHome'>首页</button>
<button @click='linkToAbout'>关于</button>
<router-view></router-view> // 占位作用
</div>
</template>
<script>
export default {
name:'App',
methods:{
linkToHome() {
this.$router.push('/home')
},
linkToAbout() {
this.$router.push('/about')
}
}
}
</script>
更多推荐
所有评论(0)