这里的路由并不是我们平时所说的硬件路由器,这里的路由就是单页面应用^ ① 的路径管理器
vue-router是Vue.js官方提供的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径与组件映射起来。
传统的页面应用,使用一些超链接实现页面切换和跳转。在vue-router单页面应用中则是路径之间的切换,也就是组件的切换
路由模块的本质就是建立起url和页面之间的映射关系
npm i vue-router -S
<router-view></router-view>
// index.js
// 导入路由对象
import Vue from ‘vue‘;
import VueRouter from ‘vue-router‘;
// 主体
import About from ‘./components/About.vue‘;
import Home from ‘./components/Home.vue‘;
// 安装插件
Vue.use(VueRouter);
// 创建路由对象并配置路由规则
let router = new VueRouter({
// 配置路由映射关系
routes: [
{
path: ‘/home‘,
component: Home
},
{
path: ‘/about‘,
component: About
}
]
});
new Vue({
el: ‘#app‘,
// 在Vue实例中挂载创建的路由实例
router: router, // 可以简写为router
render: c => c(App),
})
//app.vue中
<template>
<div>
<!-- 留坑,非常重要 -->
<!-- router-view标签会根据当前的路径,动态渲染出不同的组件 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ‘app‘,
data(){
return {}
}
}
</script>
方式1:<router-link to="路由地址"></router-link>
方式2:this.$router.push(‘路由路径‘)
<a>
标签;属性to指向与路径path对应的组件<div id="app">
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
①tag
<!-- 不再是一个<a>标签,而是被渲染成一个按钮-->
<router-link to="/home" tag="button">Home</router-link>
②replace
<!-- 点击不会返回上一页面--><router-link to="/home" tag="button" repalce>Home</router-link>
③active-class
<router-link to="/home" tag="button" active-class="active">Home</router-link>
const router = new VueRouter({ routes, linkActiveClass: ‘active‘})
<button @click="homeClick">Home</button>
methods: {
homeClick() {
//调用push方法可以回退,调用replace方法不可回退
this.$router.push(‘/home‘)
// this.$router.replace(‘./home‘)
}
$router
与$route
的区别$router
是VueRouter的一个对象,这个对象是一个全局对象,它包含了所有的路由和许多关键的对象和属性$route
是一个跳转的路由对象,每一个路由都会有一个$route
对象,它是一个局部对象,可以获取到对应的name、path、params、query等vue-router默认hash模式——使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。
hash(#)是URL的锚点,代表的是网页中的一个位置,hash出现在URL中,但不会包含在http请求中,对后端完全没有影响。
每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用“后退”按钮,就可以回到上一个位置。
如:http://www.abc.com/#/hello
const router = new VueRouter({
mode: ‘history‘,
routes: [...]
})
原文:https://www.cnblogs.com/jincanyu/p/14353126.html