一、路由定义理解
1、路由,其实就是指向,当我点击页面home按钮时,就显示home内容,点击about按钮时就显示about内容,可以理解为
home按钮=>home内容,about按钮=>about内容的一 一对应的映射关系。
2、路由中有三个基本的概念 route, routes, router
route:表示一条路由,home按钮=>home内容是一条路由;
routes:表示一组路由,[{home按钮=>home内容},{about按钮=>about}]
router:是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。
3、客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.
二、路由安装
npm install vue-router --save
三、路由的实现
1、页面实现(html模板块)
- 定义点击部分<router-link></router-link>
- 定义内容显示部分<router-view></router-view>
<router-link> 还有一个非常重要的属性 to,定义点击之后,要到哪里去
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
2、js配置路由
path和component,
const routes = [
{path:'/home',component:'Home'},
{path:'/about',component:'About'}
];
3、创建router,对路由进行管理,由构造函数new VueRouter()创建,接受routes参数
var router = new VueRouter({
routes //routes:routes
});
4.配置完成后,把router实例注入到vue跟实例中,就可以使用路由了
const app = new Vue({
router
}).$mount("#app");
整个router.js代码
import Home from "./components/Home"
import About from "./components/About"
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter);
//定义路由每个路由应该映射一个组件
const routes = [
{
path: "/home",
name: "home",
component: Home
},
{
path: '/about',
name:"about",
component:About
}
];
//创建router实例,然后出入'routes'配置
const router = new VueRouter({
routes:routes
});
export default router;
5、执行过程
当用户点击<router-link>标签时,会去寻找它的to属性,它to属性和js配置的路径{path:'/home',component:Home}中的path一 一 对应,从而找到匹配的组件,最后把组件渲染到<router-view>标签上。
四、源码下载
https://github.com/wanghongzheng/my_vue
五、效果