在使用vue cli创建项目时可以添加vue-router,或使用npm安装vue-router
配置路由跳转:
// ./src/router/index.js
//1. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import Home from '../components/Home'
import About from '../components/About'
//安装Vue-router
Vue.use(VueRouter)
//在路由对象中配置路由
const routes = [
{
path:'/home',
component: Home
},
{
path:'/about',
component:About
}
]
//全局路由控制器
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
//4. 导出全局路由控制器并使用
export default router
//./src/main.js
// 导入全局控制器
import router form './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
//导入文件夹会自动查找index.js
实践使用：
1. 创建路由组件：
在components文件夹下创建组件并导出
<template>
<div>
<h2>home</h2>
<p>Home_text</p>
</div>
</template>
<script>
export default {
name:'Home'
};
</script>
<style scoped>
</style>
<template>
<div>
<h2>About</h2>
<p>About_text</p>
</div>
</template>
<script>
export default {
name:'About'
}
</script>
<style scoped>
</style>
2. 配置路由映射
在router文件夹下的index.js导入组件并配置路的关系
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
Vue.use(VueRouter)
const routes = [
{
path:'/home',
component: Home
},
{
path:'/about',
component:About
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
3. 在所需位置通过<router-link>和<router-view>使用路由
//app.vue
<template>
<div id="app">
<router-link to='/home'> HOME </router-link>
<router-link to='/about'> ABOUT </router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
<router-link>和<router-view>
<router-link>
<router-link>激活时的class：
当<router-link>处于激活状态时，会对渲染出来的替换<router-link>的标签添加class=“router-link-exact-active router-link-active”属性，可在<style>标签中添加样式。
默认添加的class
改变默认的class名称，可用active-class属性。
<router-link active-class='active' to='/about'> ABOUT </router-link>
或者在全局路由配置中复写linkActiveClass
const router = new VueRouter({...,linkActiveClass:'active'})
<router-link>改变history为replace模式：
<router-link replace to='/about'> ABOUT </router-link>
替换<router-link>的形式：
<router-link>是vue-router中的已经内置的全局组件，<router-link>默认渲染为<a>标签，如果想替换成其他的标签，可是用以下方法进行替换：
1. 使用原生的标签进行替换：
Vue的所有的组件中都继承了Vue原型组件的$router属性，因此可以在事件监听中修改$router,通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。
-
this.$router
router 实例。
-
this.$route
当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。
<template>
<div id="app">
<!-- <router-link to='/about' tag='button'> ABOUT </router-link>
<router-link to='/home' tag='button'> HOME </router-link>-->
<button @click.prevent="homeBtnClick">HOME</button>
<button @click.prevent="aboutBtnClick">ABOUT</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
methods: {
homeBtnClick() {
if(this.$router.currentRoute.path !== '/home')//vue-router 不允许多次push同一个url
//if(this.$route.path!=='/about')
this.$router.replace("/home");
},
aboutBtnClick() {
if(this.$router.currentRoute.path !== '/about')
this.$router.replace("/about");
}
}
}
</script>
错误信息
vue-router不允许多次push同一个url，因此要检测上一次的url是否为当前url
if(this.$route.path!=='/about')也可以
2. 使用tag属性替换默认形式
<router-link tag='button' to='/about'> ABOUT </router-link>
<router-view>
<router-view>会根据当前的路径动态地渲染出不同的组件。网页中的其他内容，比如顶部的标题、导航等会和<router-view>处于同一层级。
在处理路由切换时，切换的是<router-view>挂载的组件，其他的内容不会发生改变。
网友评论