一步步从零开始学习vuerouter

前言一个包含vue-router的简单demos，从第一个demo开始，依次深入学习，即可快速上手强大的vue-router。如何使用安装模块pure或http-server来启动

前言

一个包含 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

home

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

home

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 `}// 添加了普通组件navconst UserDetail = { template: ` `, components: {Navbar}}// 路由匹配 /user/phoneconst UserPhOne= { template: ` My phone `}// 路由匹配 /user/emailconst 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')