一步一步学Vue
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一步一步学Vue相关的知识，希望对你有一定的参考价值。
本篇是是vue路由的开篇，会以一个简单的demo对vue-router进行一个介绍，主要覆盖以下几个常用场景：
1、路由跳转
2、嵌套路由
3、路由参数
1、Vue-Router
一般来说，路由定义就是定义地址访问规则，然后由路由引擎根据这些定义的规则去查找对应的页面，并转发请求给页面进行处理；对于后端来说就是这么一个模式，但前端不同，前端路由变化也只是页面内的导航比如angular中的模版切换，比如vue和react中的component切换，这种方式都是基于浏览器hash模拟url跳转。
vue-router是官方提供的一套路由工具库，基于component的路由配置引入都非常简单，最常用的是两个指令：router-view 和 router-link，router-view用来提供占位，router-link提供路由链接，对于这两个指令的介绍，我们可以直接通过demo介绍。接下来我们以传统方式引入vue-router：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue-demo2</title> <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script> <link href="./css/layui.css" rel="stylesheet"> </head> <body> <div id="app"> </div> </body>
2、路由跳转
对我们的demo做一下简单介绍，demo包含：首页、新闻列表、关于三个模块；其中新闻列表包含最新新闻、历史新闻；每个新闻题目单击时，可查看其详情页。
ok，第一步，我们实现基本的路由跳转，单击各个模块，分别打开对应“页面”，可以按照如下几个步骤处理：
1、创建模块组件
2、创建路由对象，配置路由组件映射关系
3、编写路由链接和容器
4、启用路由
首先，按照上述第一个步骤，我们需要创建三个模块组件：HomeComponent，NewsComponent，AboutComponent：
var HomeComponent = { template: \'<div>Home</div>\' }; var NewsComponent = { template: \'<div>News</div>\' }; var AboutComponent = { template: \'<div>About</div>\' };
第二步，配置路由组件映射关系：
var router = new VueRouter({
linkActiveClass:\'layui-this\',//active时会add class layui-this routes: [ { name: \'home\', path: \'/home\', component: HomeComponent }, { name: \'news\', path: \'/news\', component: NewsComponent }, { name: \'about\', path: \'/about\', component: AboutComponent } ] })
其中name表示一个具名路由，在创建路由链接的时候可以以path作为路径，也支持直接使用name作为跳转依据，但是path如果改变了，需要多个地方引入的path进行调整。
第三步，编写路由链接和容器，这里就是router-link和router-view指令的使用了，配置三个路由分别对应上面代码添加的三个路由（这里引入了layerui作为基础样式）
<div> <ul class="layui-nav"> <router-link :to="{name:\'home\'}" tag=\'li\' class="layui-nav-item"><a href="">首页</a></router-link> <router-link :to="{name:\'news\'}" tag=\'li\' class="layui-nav-item"><a href="">新闻列表</a></router-link> <router-link :to="{name:\'about\'}" tag=\'li\' class="layui-nav-item"><a href="">联系我们</a></router-link> </ul> <div class="layer-form"> <router-view></router-view> </div> </div>
其中to要写成:to，因为参数是对象，而不是一个字符串，tag表示router-link渲染的目标标签，这里表示渲染成li标签。
第四步，路由启用，路由模块可以深度集成到Vue实例中，集成方式如下：
var app = new Vue({ el: \'#app\', template: ` <div> <ul class="layui-nav"> <router-link :to="{name:\'home\'}" tag=\'li\' class="layui-nav-item " extract><a href="">首页</a></router-link> <router-link :to="{name:\'news\'}" tag=\'li\' class="layui-nav-item"><a href="">新闻列表</a></router-link> <router-link :to="{name:\'about\'}" tag=\'li\' class="layui-nav-item"><a href="">联系我们</a></router-link> </ul> <div class="layer-form"> <router-view></router-view> </div> </div> `, router: router })
此时完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue-demo2</title> <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script> <link href="./css/layui.css" rel="stylesheet"> </head> <body> <div id="app"> </div> <script> var HomeComponent = { template: \'<div>Home</div>\' }; var NewsComponent = { template: \'<div>News</div>\' }; var AboutComponent = { template: \'<div>About</div>\' }; var router = new VueRouter({ linkActiveClass:\'layui-this\', routes: [ { name: \'home\', path: \'/home\', component: HomeComponent }, { name: \'news\', path: \'/news\', component: NewsComponent }, { name: \'about\', path: \'/about\', component: AboutComponent } ] }) var app = new Vue({ el: \'#app\', template: ` <div> <ul class="layui-nav"> <router-link :to="{name:\'home\'}" tag=\'li\' class="layui-nav-item" extract><a href="">首页</a></router-link> <router-link :to="{name:\'news\'}" tag=\'li\' class="layui-nav-item"><a href="">新闻列表</a></router-link> <router-link :to="{name:\'about\'}" tag=\'li\' class="layui-nav-item"><a href="">联系我们</a></router-link> </ul> <div class="layer-form"> <router-view></router-view> </div> </div> `, router: router }) </script> </body> </html>
浏览器打开运行，可见如图效果：
在运行过程中，我们发现有一点体验不好的地方，在初始化页面时，页面路径为#/时，并没有加载任何组件，因为我们没有配置任何一个路由path为‘／’，针对这种情况，可以增加一条路由规则，当路由为/时，跳转到默认路由;修改路由配置部分代码如下即可：
routes: [ {path:\'/\',redirect:\'/home\'}, { name: \'home\', path: \'/home\', component: HomeComponent }, { name: \'news\', path: \'/news\', component: NewsComponent }, { name: \'about\', path: \'/about\', component: AboutComponent } ]
2、嵌套路由
现在模块之间跳转已经OK，但是对于新闻列表，需要包含最新列表和历史列表，这是在新闻列表模块下，但是模式和外层路由一样，还是按照我们的步骤来。
第一步，创建路由组件，这里是最新新闻列表和历史新闻列表：
var LatestNewsComponent = { template: \'<div>Latest News</div>\' } var HistoryNewsComponent = { template: \'<div>History News</div>\' }
第二步，配置组件和路由映射关系：
var router = new VueRouter({ linkActiveClass: \'layui-this\', routes: [ { path: \'/\', redirect: \'/home\' }, { name: \'home\', path: \'/home\', component: HomeComponent }, { name: \'news\', path: \'/news\', component: NewsComponent, children: [ { path: \'\', redirect: \'latest\' },//默认路由 { name: \'latest-news\', path: \'latest\', component: LatestNewsComponent }, { name: \'history-news\', path: \'hisotry\', component: HistoryNewsComponent } ] }, { name: \'about\', path: \'/about\', component: AboutComponent } ] })
第三步，编写路由链接和路由容器，在这里修改NewsComponent：
var NewsComponent = { template: ` <div style="margin-top:5px"> <ul class="layui-nav layui-nav-tree"> <router-link :to="{name:\'latest-news\'}" class="layui-nav-item" tag="li">最新消息</router-link> <router-link :to="{name:\'history-news\'}" class="layui-nav-item" tag="li">历史消息</router-link> </ul> <div> <router-view></router-view> </div> </div>` };
第四步，启用路由，这个在配置基本路由的时候已经启用，此处忽略此步骤即可，刷新运行（不要在乎页面容颜，看功能，
以上是关于一步一步学Vue的主要内容，如果未能解决你的问题，请参考以下文章