每周三集前端免费视频
每年帮助超100万前端爱好者学习

Vue2.0 中vue-router的学习过程笔记

开始学习Vue2.0技术,今天学习了关于vue-router的知识,其实在vue2里router的操作并没有变化,用它来创建单页应用是非常简单的,只要配置组建和路由映射,然后告诉vue-router在那里渲染它就可以了。

第一个小实例:

JavaScript里可以简单的分成4个步骤来写和添加一个路由器:

  1. 定义路由组件
  2. 定义路由
  3. 创建router实例
  4. 创建和挂载实例

下边我们看一下代码,这个代码非常简单:

JS代码

再写这段代码中我犯了一个错误,就是把index.js这个脚本文件放到了<head>标签里,然后测试时出现了[Vue warn]: Cannot find element: #app 的错误提示,效果也没有出来,其实这是一个很简单的错误,只要把index.js放到所有DOM的最后,等dom加载完就不会出现这样的错误。

第二个小实例(动态路由):

所谓的动态路由,就是在路由里传参数,比如我们作电商网站的时候,经常用的商品详细页,就是一个典型用到动态路由案例,每个商品都不一样,但是打开来的模板是一样的。
比如我们有个user页面,我们后边设置两个链接,但是都是用的User模板,却显示的内容不同。关键语法是“:id”,这里的id代表参数。我们来看一下代码吧,代码中我加了详细的注释。

html代码

js代码

注意:在写这段代码的时候,注意定义的路由 要写成  const routes    而不是  const routers    。不知道为什么会出现这种情况,路由效果是出不来的,而且也不报错。

正确写法

错误写法:

这个问题,我会继续跟进的.....

第三个小实例(嵌套路由)

我们在开发中大多数是嵌套路由,所以这个操作也是最常用的。嵌套路由的语法就是在制作路由代码是加childern参数。

html代码:

JS代码,里边有详细的注释

编程式导航

我们在JavaScript中写业务逻辑时,进场需要跳转页面,比如我们在登陆时,输入了用户名和密码点击登录按钮,如果登陆成功我们需要跳转新内容。这时候就需要通过编写代码来实现。

router.push(location)

想要导航到不同的URL,则使用router.push方法。这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的URL。当你点击<router-link>时,这个方法会在内部调用,所以说,点击<router-link :to="...">等同于调用router.push(...);

router.replace(location)

跟router.push很像,唯一的不同就是,它不会向history添加新纪录,而是跟它的方法名一样--替换掉当前的history记录。

命名视图

有时间想同时展示多个视图,而不是嵌套展示,例如创建一个布局,有sidebar和main两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果router-view 没有设置名字,那么默认为default。

下边就是官方提供的例子:

html文件

js文件

 

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » Vue2.0 中vue-router的学习过程笔记
分享到: 更多 (0)

评论 抢沙发