Vue-router(vue2.0)用法示例

Posted 2020-10-03 罗夏

一.新建3个组件

 1./src/components/post.vue

<template>
<div>
hello world! this is POST!
</div>
</template>

<script>
export default {

}
</script>

　　

2./src/components/view.vue

<template>
<div>
hello world! this is VIEW!
</div>
</template>

<script>
export default {

}
</script>

　　

3./src/components/vote.vue

<template>
<div>
hello world! this is VOTE!
</div>
</template>

<script>
export default {

}
</script>

　　

　

二.路由

1.入口文件main.js,导入路由

import router from ‘./router‘

　　

可以看到router是从router这个文件夹中引入的

 

2.打开router文件夹下的index.js,加入两个路由post和view

import Vue from ‘vue‘
import Router from ‘vue-router‘
import post from ‘@/components/post‘
import view from ‘@/components/view‘

// 注册路由
Vue.use(Router)

export default new Router({
  mode: ‘history‘,
  routes: [
    { path: ‘post‘, name: ‘post‘, component: post },
    { path: ‘view‘, name: ‘view‘, component: view }
  ]
})

　　

PS:mode有三种模式
(1).hash模式:使用URL hash值来作为路由。支持所有浏览器。默认,这会在地址栏中出现#
(2).history模式：依赖html5 History API和服务器配置。查看HTML5 History模式。
(3).abstract模式:支持所有javascript运行环境，如Node.js服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。

 

三.使用路由

1.app.vue中写入

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link :to="/post">post</router-link>
    <router-link :to="{ name: ‘view‘, params: {} }">view</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

　　

2.解释点:

(1)router-link
a.router-link是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址
b.to:这是一个必须设置的属性，否则路由无法生效。除了使用name,也可以是用path
<router-link to="/post">post</router-link>
c.replace
一个布尔类型，默认为false。如果replace设置为true，那么导航不会留下history记录，点击浏览器回退按钮不会再回到这个路由。
d.tag
router-link默认渲染成a标签，也有方法让它渲染成其他标签，tag属性就用来设置router-link渲染成什么标签的。

(2).router-view
这个组件十分关键，它就是用来渲染匹配到的路由的。可以附加transition过渡,也可以配合<keep-alive>来缓存数据.

 

四.动态路由(携带参数的路由)

1.使用路由命名name
(1).修改view组件:

<template>
<div>
hello world! this is VIEW! {{ $route.params.id }}
</div>
</template>

<script>
export default {

}
</script>

　　

(2).修改App.vue

<router-link :to="{ name: ‘view‘, params: {id: 10} }">view</router-link>

　　

2.使用路由path

(1).修改router下的index.js

{ path: ‘/view/:id‘, name: ‘view‘, component: view }

　　

(2).修改App.vue

<router-link to="/view/10">view</router-link>

　　

(3).修改view.vue

<template>
<div>
hello world! this is VIEW! {{ $route.params.id }}
</div>
</template>

<script>
export default {

}
</script>

　　

五.嵌套路由(在组件中使用路由)

我们实现在view组件中包含post组件和vote组件

1.改写App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link :to="{ name: ‘post‘, params: {} }">post</router-link>
    <router-link :to="{ name: ‘view‘, params: {} }">view</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

　　

2.改写router/index.js

export default new Router({
  mode: ‘history‘,
  routes: [
    {
      path: ‘/view‘,
      name: ‘view‘,
      component: view,
      children: [
        { path: ‘/post‘, name: ‘post‘, component: post },
        { path: ‘/vote‘, name: ‘vote‘, component: vote }
      ]
    }
  ]
})

　　

3.改写view.vue

<template>
<div>
<router-link :to="{ name: ‘post‘, params: {} }">post</router-link>
<router-link :to="{ name: ‘vote‘, params: {} }">vote</router-link>
<router-view></router-view>
</div>
</template>

<script>
export default {

}
</script>

　　

六.导航式编程router.push()

点击router-link时执行的就是router.push()的方法，我们可以单独给它一个点击事件，同样可以实现跳转

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link :to="{ name: ‘post‘, params: {} }">post</router-link>
    <router-link :to="{ name: ‘view‘, params: {} }">view</router-link>
    <button @click="goView">跳转</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    goView () {
      this.$router.push(‘/view‘)
    }
  }
}
</script>