前后端分离(5)—路由详解和路由跳转方式

路由安装完成以后你会发现项目目录下面多了router.js和store.js 目前先只用到router.js,打开之后是基础的路由配置,下面详细讲解一下 先看第一部分,有path,name和component。 path:访问路径(访问的url,地址栏) name:命名路由(暂时用不到 保持和path的英文一样,不要带斜杠) component:页面路径(就是你要展示的页面的详细地址) 所以这个页面的访问路径就是http://localhost/#/about 访问的是views目录下的About的文件。 下面是一个复杂的路由 { path: '/blog', //路由路径(一般为一级大目录并没有具体页面,比如作业单底下有N个子页面,那这个是最根本的) name: 'blog', //命名路由 你目前用不到 就保持和path一样的名字就行,不要斜杠 redirect: '/blog/list', //这个redirect是指,用户访问path的时候,会跳转到这个redirect的页面 component: resolve=> require(['@/views/blog/home'], resolve),//页面路径 children: [ //path的子页面 { path: '/blog/list', //子页面的路由路径 name: 'list', //同上面的name说明是一样的哈 component:resolve=> require(['@/views/blog/home/list'], resolve),//页面路径 }, ... //这里可以继续加入数组 就完成了path下为blog的路由渲染 ] } path是路由最终的执行路径,也就是页面url 下面就按照上面的路由把list页面个输出出来 基础语法 不要忘记加逗号,那行三个点的是省略,也需要删掉,不然会报错。 但是你会发现 做的没有问题 还是报错了,是因为缺少了页面,我们下面创建页面 按照路由需要创建两个文件和一个文件夹,首先在views目录下创建blog文件夹。 然后第二步,创建home文件 内容随意填,能区分出来就行 还缺最后一步了,创建最后一个list子页面 要先创建一个home文件夹,再去创建list文件才行。(我觉得你可能对这一步挺懵,不会的话随时问我,为什么要创建一个home文件夹呢,因为路由里规定了这个目录哈) 此时可以看到项目终于不报错了。 我们看一下页面是什么样子呢 /#/blog/list 咱们明明添加了两行字, 这是home文件,这是list文件,为什么只显示出来一个home的文字呢?因为没有在home文件里加载路由方法哈。 只要有下级页面 都要加上这个哦,加的位置需要自己判断。 现在回来看就对了。 页面路由弄明白了吗? 最后讲一下路由跳转的两种方式: 视图里直接跳转的方法 点击跳转 JS跳转方法 this.$router.push({ path:’/home/list’}) 路由就两种跳转方法哦,别想太复杂了
联系作者
作者QQ:1538888858 有事请联系作者

Article tags:

作者头像
前端劝退师创始人

分享前端开发资源和前端开发技术资讯等,主攻前后端分离技术;分享个人经历。

Prev前后端分离(4)—教你如何安装Vue-Router(路由)
Next前后端分离(6)—什么情况下我应该使用 Vuex?

发表评论

评论列表

暂无评论