一步步从零开始学习vue-router

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000015049704
版权

前言

一个包含 vue-router的简单demos，从第一个demo开始，依次深入学习，即可快速上手强大的vue-router。

如何使用

  1. 安装模块pure 或 http-server来启动服务器

    npm install -g puer or npm install -g http-server

  2. 克隆仓库
  3. 启动服务
    http-server -p 8000 or puer -p 8000,浏览器自动打开 localhost:8000

什么是Vue-router

vue.js官方的路由，深度结合了vue.js核心内容，可以很方便的创建单页面应用(PWA)，具有如下特点:

  • 嵌套路由/视图
  • 模块化、基于组件的配置
  • 路由参数、查询
  • 与vue.js一样的视图过渡效果

github source

Demo 01 - start

一个快速上手vue-router的例子

index.html

  <ul>
    <router-link to="/home" tag="li">
      <a>/home</a>
    </router-link>
    <router-link to="/about" tag="li">
      <a>/about</a>
    </router-link>
  </ul>
  
  <router-view></router-view>

js file

const Home = {template: '<div>Home page</div>'}
const About = {template: '<div>About page</div>'}
const router = new VueRouter({
  routes: [
    {path:'/home',component:Home},
    {path:'/about',component:About},
  ]
})
new Vue({
  router,
}).$mount('#app')

Demo 02 - dynamic router

动态路由匹配，匹配同一个路由下的子路由，如/about/xin和/about/mine,:id 为参数

index.html

<ul>
    <router-link to="/about/mint" tag="li">
      <a>/about/mint</a>
    </router-link>
    <router-link to="/about/xin" tag="li">
      <a>/about/xin</a>
    </router-link>
  </ul>
  
  <router-view></router-view>

js file

const About = {template: '<div>About page: {{$route.params.id}}</div>'}
const router = new VueRouter({
  routes: [
    {path:'/about/:id',component:About},
  ]
})
new Vue({
  router,
}).$mount('#app')

Demo 03 - nested router

嵌套路由

index.html

<ul>
    <router-link to="/" tag="li">
      <a>主页</a>
    </router-link>
    <router-link to="/about/mint" tag="li">
      <a>/about/mint</a>
    </router-link>
    <router-link to="/about/mint/profile" tag="li">
      <a>/about/mint/profile</a>
    </router-link>

    <router-link to="/about/xin" tag="li">
      <a>/about/xin</a>
    </router-link>
    <router-link to="/about/xin/edit" tag="li">
      <a>/about/xin/edit</a>
    </router-link>
  </ul>

  <router-view></router-view>

js file

const Home = {template: '<div>Home page</div>'}
const AboutProfile = {template: '<div>AboutProfile</div>'}
const AboutEdit = {template: '<div>AboutEdit</div>'}
const About = {
  template: `
  <div>
    {{$route.params.id}}
    <router-view></router-view>
  </div>
  `
}
const router = new VueRouter({
  routes: [
    {path:'/home',component:Home},
    {
      path:'/about/:id',
      component:About,
      children: [
        {path:'profile',component: AboutProfile,},
        {path:'edit',component: AboutEdit,}
      ]
    },
  ]
})
new Vue({
  router,
}).$mount('#app')

Demo 04 - nested router children router

嵌套路由，通过在一个路由里面设置children，即可嵌套路由，子路由下的嵌套设置与主路由的设置是一样的

index.html

<ul>
    <router-link to="/about" tag="li">
      <a>About</a>
    </router-link>
    <router-link to="/user" tag="li">
      <a>User</a>
    </router-link>
  </ul>
  <div>
    <router-view></router-view>
  </div>

js file

const About = {
  template: `<div>About</div>`
}
const User = {
  template: `
    <div>
      <h2>user-{{ $route.params.id }}</h2> 
      <router-view></router-view>
    </div>
  `
}
const UserStart = {
  template: `
    <div>
      <router-link to="/user/xin" tag="li">
        <a>user-xin</a>
      </router-link>
      <router-link to="/user/mint" tag="li">
        <a>user-mint</a>
      </router-link>
    </div>
  `
}
const UserProfile = {
  // /user/xin
  template: `
    <div>
      <router-link to="/user/xin/edit" tag="li">
        <a>user-xin-edit</a>
      </router-link>
      <router-link to="/user/mint/edit" tag="li">
        <a>user-mint-edit</a>
      </router-link>
    </div>
  `
}
const router = new VueRouter({
  routes: [
    {path: '/about', component: About},
    {path: '/user', component: User,
      children: [
        {path: '', component: UserStart},
        {path: ':id', component: UserProfile},
    ]}
  ]
})
new Vue({
  router,
}).$mount('#app')

Demo 05 - nested router with query params

嵌套路由，带查询参数，$route.query下为所查询的参数，通过:to绑定参数，与to功能一致

index.html

<ul>
    <router-link to="/about" tag="li">
      <a>About</a>
    </router-link>
    <router-link to="/user" tag="li">
      <a>User</a>
    </router-link>
  </ul>
  <div>
    <router-view></router-view>
  </div>

js file

const About = {
  template: `<div>About</div>`
}
const User = {
  template: `
    <div>
     <h2>user-{{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
const UserStart = {
  template: `
    <div>
      <router-link to="/user/xin" tag="li">
        <a>user-xin</a>
      </router-link>
      <router-link to="/user/mint" tag="li">
        <a>user-mint</a>
      </router-link>
      <router-view></router-view>
    </div>
  `
}
const UserProfile = {
  // /user/xin
  data() {
    return {
      id: this.$route.params.id,
    }
  },
  template: `
    <div>
      <p>id: {{id}}</p>
      <router-link tag="button" :to="{name: 'userEdit',params:{id},query:{local:'zh-cn',limit:100}}">
        edit
      </router-link>
    </div>
  `
}
const UserEdit = {
  // /user/xin/edit
  template: `
    <div>
      <p>local: {{$route.query.local}}</p>
      <p>limit: {{$route.query.limit}}</p>
    </div>
  `
}
const router = new VueRouter({
  routes: [
    {path: '/about', component: About},
    {path: '/user', component: User,
      children: [
        {path: '', component: UserStart},
        {path: ':id', component: UserProfile},
        {path: ':id/edit', component: UserEdit,name:'userEdit'},
    ]}
  ]
})

Demo 06 - programed nav router

this.$router.push('/')与 <router-link to="/"> </router-link>功能一致

index.html

  <ul>
    <router-link to="/about/mint" tag="li">
      <a>/about/mint</a>
    </router-link>
    <router-link to="/about/xin" tag="li">
      <a>/about/xin</a>
    </router-link>
  </ul>
  <button @click="nav2home">home</button>
  
  <router-view></router-view>

js file

const Home = {
  template: `
  <div>Home page</div>
  `,
}
const About = {template: '<div>About page: {{$route.params.id}}</div>'}
const router = new VueRouter({
  routes: [
    {path:'/home',component:Home},
    {path:'/about/:id',component:About},
  ]
})
new Vue({
  router,
  methods: {
    nav2home() {
      this.$router.push('/')
    }
  }
}).$mount('#app')

Demo 07 - named router

可以通过给路由命名，并通过绑定属性:to的方式来定义路由

index.html

  <ul>
      <router-link :to="{name: 'user',params:{userId:26}}" tag="li">
        <a>/user/26</a>
      </router-link>
    <router-link to="/about/mint" tag="li">
      <a>/about/mint</a>
    </router-link>
    <router-link to="/about/xin" tag="li">
      <a>/about/xin</a>
    </router-link>
  </ul>
  <button @click="nav2home">home</button>
  
  <router-view></router-view>

js file

const User = {
  template: `
  <div>user page</div>
  `,
}
const About = {template: '<div>About page: {{$route.params.id}}</div>'}
const router = new VueRouter({
  routes: [
    {
      path:'/user/:userId',
      component: User,
      name: 'user'
    },
    {path:'/about/:id',component:About},
  ]
})
new Vue({
  router,
  methods: {
    nav2home() {
      console.log(this.$router);
      this.$router.push('/')
    }
  }
}).$mount('#app')

Demo 08 - named views

命名视图，可以指定多个<router-view>来渲染显示视图，并可设置默认视图

index.html

  <ul>
     <router-link to="/" tag="li"><a>/</a></router-link>
     <router-link to="/my" tag="li"><a>/my</a></router-link>
  </ul>
  
  <router-view class="view"></router-view>
  <router-view class="view" name="a"></router-view>
  <router-view class="view" name="b"></router-view>

js file

const Dasiy = {template: `<div>1. Daisy</div>`};
const Lily = {template: `<div>2. Lily</div>`};
const Violet = {template: `<div>3. Violet</div>`};
const router = new VueRouter({
  routes: [{
    path: '/',
    components: {
      default: Dasiy, // default router
      a: Lily,
      b: Violet,
    }
  },
  {
    path: '/my',
    components: {
      default: Lily, // default router
      a: Violet,
      b: Dasiy,
    }
  }]
})
router.push('/')
new Vue({
  router,
}).$mount('#app')

Demo 09 - named views with nested router

嵌套路由中使用命名视图

index.html

 <div class="router-view">
     <router-view></router-view>
   </div>

js file

const Navbar = {
  template: `
  <div>
    <router-link to="/user/phone">phone</router-link>
    <router-link to="/user/email">email</router-link>
  </div>
  `
}
// 添加了普通组件nav
const UserDetail = {
  template: `
    <div>
      <Navbar></Navbar>
      <router-view ></router-view>
      <!-- 下面这个不一定会渲染-->
      <router-view name="help"></router-view>
    </div>
  `,
  components: {Navbar}
}
// 路由匹配 /user/phone
const UserPhone = {
  template: `
    <div>
      My phone
    </div>
  `
}
// 路由匹配 /user/email
const UserEmail = {
  template: `
    <div>
      My email
    </div>
  `
}
const UserEmailhelp = {
  template: `
    <div>
      My email help
    </div>
  `
}
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: UserDetail,
      children: [
        {path: 'phone', component: UserPhone},
        {
          path: 'email',
          // 路由匹配到/user/email时，当有多个router-view时
          // 将会根据视图的别名分别进行渲染，没有别名渲染默认的模板
          components: {
            default: UserEmail,
            help: UserEmailhelp,
          }
        }
      ]
    }
  ]
})
router.push('/user')
new Vue({
  router,
}).$mount('#app')

Demo 10 - redirect

路由的重定向，访问/about将会跳转到/xin

index.html

  <ul>
    <router-link to="/about" tag="li">
      <a>/about => /xin</a>
    </router-link>
  </ul>
  
  <router-view></router-view>

js file

const About = {template: '<div>About page</div>'}
const Xin = {template: '<div>Xin page</div>'}
const router = new VueRouter({
  routes: [
    {path:'/about',redirect: '/xin'},
    {path:'/xin',component:Xin},
  ]
})
router.push('/')
new Vue({
  router,
}).$mount('#app')

Demo 11 - alais

路由的别名,访问/about与/xin的内容是一样的，共用一个组件

index.html

<ul>
    <router-link to="/about" tag="li">
      <a>/about</a>
    </router-link>
    <router-link to="/xin" tag="li">
      <a>/xin</a>
    </router-link>
  </ul>
  
  <router-view></router-view>

js file

const About = {template: '<div>About page</div>'}
const Xin = {template: '<div>Xin page</div>'}
const router = new VueRouter({
  routes: [
    {path: '/about', component: About, alias: '/xin'}
  ]
})
router.push('/')
new Vue({
  router,
}).$mount('#app')
weixin_33726943
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从零开始，零基础，一点一点探索vue-router(vue2.0)
weixin_30527143的博客
03-02 53
首先我们用vue-cli搭建一个vue开发的脚手架，删除它的原来的代码，开始写自己的代码，实现最简单的router功能： 一，开始 新建几个自己需要的页面，随便写点东西 <template> <div id = "movie"> I'm moive! </div> </template> <script&g...
从零开始的ARouter新手篇
Tomes.V.White
11-20 3886
1、ARouter是什么？ ARouter是阿里开源的一款android路由框架。按照git上的原说法：他是一个用于帮助 Android App 进行组件化改造的框架 —— 支持模块间的路由、通信、解耦。 2、ARouter有什么作用？ 解耦、方便管理多页面的动态跳转，提供组件化解耦的一种方案，同一Native与H5的跳转方法。 3、为什么要用ARouter？ 动态跳转:针对复杂逻辑下，...
【Vue系列】从零开始搭建vue-cli脚手架详细教程
weixin_41950078的博客
06-08 1037
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境。 1.0 安装vue-cli
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8700
未完
从头开始学习vue-router
02-24
要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用<a></a>标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。这里的路由并不是指我们...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 81
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 267
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 224
【代码】vue el-select的下拉树形结构。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1317
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
easyui 点击单元格的时候，获取该行另外一个字段的值
极客栈
07-29 367
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 360
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
angular入门基础教程(四）动态属性与事件
峰会路转的博客
07-29 160
状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 665
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
新手指南：从零构建vue2+vue-router2+webpack3项目
"这篇教程详细介绍了如何从零开始构建一个基于Vue2、Vue-Router2和Webpack3的项目。教程适合新手，注重实践操作，不深入探讨相关技术的底层原理。首先，创建一个名为vue2practice的项目目录，并通过npm初始化生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值