路由中有三个基本的概念 route, routes, router。
1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。
2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
3, router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。
在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变
效果图:
1. 使用vue-router需要先安装
npm install vue-router --save
或:
cnpm install vue-router --save
2. 项目目录如下:
3. App.vue代码
<template>
<div id="app">
<header>
<!-- router-link 定义点击后导航到哪个路径下 -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</header>
<!-- 对应的组件内容渲染到router-view中 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
2. main.js代码
import Vue from 'vue'
import App from './App'
// 导入 router 对象
import router from "./index";
Vue.config.productionTip = false
new Vue({
el: '#app',
// 将router对象传入到vue实例
router,
components: { App },
template: '<App/>'
})
3. index.js代码
// 配置路由相关信息
import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import home from "./home.vue";
import about from "./about.vue";
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
// 路由的配置(访问的路径和显示的对应的组件)
const routes = [
{
path: "/home",
component: home
},
{
path: "/about",
component: about
},
{
path: "/",
component: home
},
]
// 创建VueRouter对象并导出
var router = new VueRouter({
routes
})
export default router;
4. about.vue组件中的代码
<template>
<div>
<h1>about</h1>
<p>{
{aboutMsg}}</p>
</div>
</template>
<script>
export default {
data() {
return {
aboutMsg: '我是about组件'
}
}
}
</script>
5. home.vue组件中的代码
<template>
<div>
<h1>home</h1>
<p>{
{msg}}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: "我是home 组件"
}
}
}
</script>
6. 此时如果我们想访问跟路由/时就显示home组件,index.js中的代码新增两行即可
// 路由的配置(访问的路径和显示的对应的组件)
const routes = [
{
path: "/home",
component: home
},
{
path: "/about",
component: about
},
{
path: "/", // 新增行
component: home // 新增行
},
]
7. 此时如果我们想点击的按钮一个状态,未点击的按钮另外一个状态
因为我们点击的按钮,router会自动帮我们在该按钮上加一个class属性 router-link-active,所以我们只要定义好该属性的样式即可,同时我们又想为其它未点击的按钮也也设置一个相同的样式,只需要在所有按钮上都加上一个样式属性就行,切记router-link-active一定要放在所有按钮加样式属性的下面
<template>
<div id="app">
<header>
<!-- router-link 定义点击后导航到哪个路径下 -->
<router-link to="/home" class="red">Home</router-link>
<router-link to="/about" class="red">About</router-link>
</header>
<!-- 对应的组件内容渲染到router-view中 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
.red{
color: red;
}
.router-link-active{
color: gold;
}
</style>
8. 导入每个组件中用到的js文件
如果我们的一个组件中用到了很多的js导入包,那么我们直接在main.js中导入那个js文件即可: