vue-router官网:传送门
vue-router起步:传送门
vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用
单页应用:Single Page Application简称SPA,只有一个web页面的应用,用户与应用交互时,动态更新该页面的内容
简单的来说,根据不同的url与数据,将他们都显示在同一个页面中,就可以称为是单页应用
而控制页面跳转需要用路由
vue-router下载:下载js,或使用npm install vue-router -S
vue-router使用:
定义组件
配置路由
创建路由对象
注入路由
Learn
一、-vue-router路由的基本用法
目录结构
【每个demo下方都存有html源码】
一、-vue-router路由的基本用法
使用 router-link 组件来导航、通过传入 `to` 属性指定链接、<router-link> 默认会被渲染成一个 `<a>` 标签
<body> <div id = "GaryId"> <!--router-link默认被渲染成一个a标签--> <router-link to="/home">首页</router-link> <router-link to="/foods">美食</router-link> <div> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </div> </body>
分四步使用vue-router
<script> //1 定义组件 let Home = { template : "<h2>首页</h2>" } let Foods = { template : "<h2>美食</h2>" } //2 配置路由 路由可能有多个 const myRoutes = [ { path : "/home", component : Home }, { path : "/foods", component : Foods } ] // 3 创建路由对象 const myRouter = new VueRouter({ //routes : routes routes : myRoutes }); new Vue({ //4 注入路由 简写 router : myRouter }).$mount("#GaryId") </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> </head> <body> <div id = "GaryId"> <!--router-link默认被渲染成一个a标签--> <router-link to="/home">首页</router-link> <router-link to="/foods">美食</router-link> <div> <!--将数据显示在这里--> <router-view></router-view> </div> </div> </body> <script type="text/javascript" src="../js/vue.js" ></script> <script type="text/javascript" src="../js/vue-router.js" ></script> <script> //1 定义组件 let Home = { template : "<h2>首页</h2>" } let Foods = { template : "<h2>美食</h2>" } //2 配置路由 路由可能有多个 const myRoutes = [ { path : "/home", component : Home }, { path : "/foods", component : Foods } ] // 3 创建路由对象 const myRouter = new VueRouter({ //routes : routes routes : myRoutes }); new Vue({ //4 注入路由 简写 router : myRouter }).$mount("#GaryId") </script> </html>