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

Cobub 发布于2019-08-22 17:34 / 856人阅读

摘要：前言一个包含的简单，从第一个开始，依次深入学习，即可快速上手强大的。

前言

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

如何使用

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

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

克隆仓库

启动服务
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

  
    
      /home
    
    
      /about

js file

const Home = {template: "Home page"}
const About = {template: "About page"}
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


    
      /about/mint
    
    
      /about/xin

js file

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

Demo 03 - nested router

嵌套路由

index.html


    
      主页
    
    
      /about/mint
    
    
      /about/mint/profile
    

    
      /about/xin
    
    
      /about/xin/edit

js file

const Home = {template: "Home page"}
const AboutProfile = {template: "AboutProfile"}
const AboutEdit = {template: "AboutEdit"}
const About = {
  template: `
  
    {{$route.params.id}}
    
  
  `
}
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


    
      About
    
    
      User

js file

const About = {
  template: `About`
}
const User = {
  template: `
    
      user-{{ $route.params.id }} 
      
    
  `
}
const UserStart = {
  template: `
    
      
        user-xin
      
      
        user-mint
      
    
  `
}
const UserProfile = {
  // /user/xin
  template: `
    
      
        user-xin-edit
      
      
        user-mint-edit
      
    
  `
}
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


    
      About
    
    
      User

js file

const About = {
  template: `About`
}
const User = {
  template: `
    
     user-{{ $route.params.id }}
      
    
  `
}
const UserStart = {
  template: `
    
      
        user-xin
      
      
        user-mint
      
      
    
  `
}
const UserProfile = {
  // /user/xin
  data() {
    return {
      id: this.$route.params.id,
    }
  },
  template: `
    
      id: {{id}}
      
        edit
      
    
  `
}
const UserEdit = {
  // /user/xin/edit
  template: `
    
      local: {{$route.query.local}}
      limit: {{$route.query.limit}}
    
  `
}
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("/")与功能一致

index.html

  
    
      /about/mint
    
    
      /about/xin

js file

const Home = {
  template: `
  Home page
  `,
}
const About = {template: "About page: {{$route.params.id}}"}
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

  
      
        /user/26
      
    
      /about/mint
    
    
      /about/xin

js file

const User = {
  template: `
  user page
  `,
}
const About = {template: "About page: {{$route.params.id}}"}
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

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

index.html

  
     /
     /my

js file

const Dasiy = {template: `1. Daisy`};
const Lily = {template: `2. Lily`};
const Violet = {template: `3. Violet`};
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

js file

const Navbar = {
  template: `
  
    phone
    email
  
  `
}
// 添加了普通组件nav
const UserDetail = {
  template: `
    
      
      
      
      
    
  `,
  components: {Navbar}
}
// 路由匹配 /user/phone
const UserPhone = {
  template: `
    
      My phone
    
  `
}
// 路由匹配 /user/email
const UserEmail = {
  template: `
    
      My email
    
  `
}
const UserEmailhelp = {
  template: `
    
      My email help
    
  `
}
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

  
    
      /about => /xin

js file

const About = {template: "About page"}
const Xin = {template: "Xin page"}
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


    
      /about
    
    
      /xin

js file

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

云服务器 GPU云服务器从零开始学习编程从零开始学机器学习从零开始学习hadoop 从零开始学习数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95297.html

前端每周清单第 54 期: SwiftNIO, 自定义 vue-router, Web 缓存与 Gr

摘要：新闻热点国内国外，前端最新动态苹果开源了版近日，苹果开源了一款基于事件驱动的跨平台网络应用程序开发框架，它有点类似，但开发语言使用的是。苹果称的目标是帮助开发者快速开发出高性能且易于维护的服务器端和客户端应用协议。 showImg(https://segmentfault.com/img/remote/1460000013677379); 前端每周清单专注大前端领域内容，以对外文资料的...

刘东 2019-08-22 15:20 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
后端开发者从零做一个移动应用（后端篇）

摘要：后端开发的疑惑后端开发最常面对的一个问题性能高并发等等。而到了时代，在方面有了前后端分离概念移动后端更是无力渲染天然前后端分离。先来上一张前端页面的效果图（Vue + Vux + Vuex + Vue-Router）。showImg(https://segmentfault.com/img/remote/1460000010207850); 第一次做gif 没什么经验，太大了。加载...

codergarden 2019-06-27 17:04 评论0 收藏0
从零开始实现一个简易的Java MVC框架

摘要：不过仔细了解了一段时候发现，其实他的原理是很简单的，所以想要自己也动手实现一个功能类似的框架。原文地址从零开始实现一个简易的框架前言最近在看spring-boot框架的源码，看了源码之后更是让我感受到了spring-boot功能的强大。而且使用了很多的设计模式，让人在看的时候觉得有点难以下手。不过仔细了解了一段时候发现，其实他的原理是很简单的，所以想要自己也动手实现一个功能类似的...

neuSnail 2019-08-16 12:39 评论0 收藏0