当我们构建一个Vue.js的单页应用时,通常需要对页面进行路由设置,即根据不同的URL地址,展示不同的页面内容,这时候就需要使用Vue官方提供的vue-router插件。
1. 安装vue-router
vue-router是一个独立的插件,需要先行安装。
可以使用npm安装:
npm install vue-router --save
也可以使用yarn安装:
yarn add vue-router
安装完成后,还需要在Vue项目的入口文件中引入vue-router:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2. 定义路由
定义路由就是告诉vue-router要在哪些URL下展示哪些组件。这个步骤需要在一个单独的文件中完成,例如routes.js
。
import Home from './components/Home.vue'
import About from './components/About.vue'
export default new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
这里我们使用了ES6的模块化语法,并定义了两个组件Home.vue
和About.vue
,分别表示首页和关于页面。在路由定义中使用path
指定URL地址,使用component
指定对应的组件。
3. 注册路由
在Vue应用的入口文件中,将路由定义的实例注册到Vue根实例中,并将路由绑定到一个组件容器中,这个容器负责在不同的URL下展示对应的组件。
import Vue from 'vue'
import router from './routes'
import App from './App.vue'
new Vue({
router,
el: '#app',
render: h => h(App)
})
在这个例子中,我们使用<router-view>
作为组件容器,它根据路由的配置,将显示不同的组件。
4. 跳转链接
在Vue组件中,可以使用<router-link>标签设置跳转链接:
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
这里的to
属性指定了跳转到哪一个URL。
示例
下面我们通过两个例子,进一步理解vue-router的基本使用。
例子一
我们构建一个简单的博客网站,即在首页列出所有的文章,在文章的链接下面展示正文内容。
我们先建立两个组件,一个是主页面的Home.vue
,另一个是文章详情的Post.vue
。
<!-- Home.vue -->
<template>
<div>
<h1>Recent Posts</h1>
<ul>
<li v-for="(post, index) in posts" :key="index">
<router-link :to="{ name: 'post', params: { id: index } }">{{ post.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
posts: [
{ title: 'Post 1', content: 'This is post 1' },
{ title: 'Post 2', content: 'This is post 2' },
{ title: 'Post 3', content: 'This is post 3' }
]
}
}
}
</script>
<!-- Post.vue -->
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
<router-link to="/">Back</router-link>
</div>
</template>
<script>
export default {
computed: {
post () {
return this.$route.params.id ? this.$parent.posts[this.$route.params.id] : { title: '', content: '' }
}
}
}
</script>
可以看到,在Home.vue
中,我们使用了<ul>
和<li>
标签列出所有文章标题,并将每一篇文章标题转化为<router-link>
标签,这样用户点击标题时,就能跳转到对应的文章详情页面。
在Post.vue
中,我们使用了this.$route.params
获取当前路由中的id
参数,从而展示对应的文章内容。同时,还添加了一个返回首页的链接。
最后,我们在路由定义中,添加对应的路由设置:
import Home from './components/Home.vue'
import Post from './components/Post.vue'
export default new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/post/:id',
name: 'post',
component: Post
}
]
})
这里的/post/:id
中,冒号表示这是一个动态参数,可以用this.$route.params.id
获取。
例子二
我们按照原来的博客网站,进一步增加评论功能,即每篇文章详情页下方展示该篇文章的所有评论。
我们在文章详情的Post.vue
组件中,添加评论表单和评论列表:
<!-- Post.vue -->
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
<form @submit.prevent="addComment">
<h3>Add a Comment</h3>
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="comment.username">
</div>
<div>
<label for="comment">Comment:</label>
<textarea id="comment" v-model="comment.content"></textarea>
</div>
<button type="submit">Post Comment</button>
</form>
<h2>Comments</h2>
<ul>
<li v-for="(comment, index) in post.comments" :key="index">
<strong>{{ comment.username }}:</strong> {{ comment.content }}
</li>
</ul>
<router-link to="/">Back</router-link>
</div>
</template>
<script>
export default {
data () {
return {
comment: { username: '', content: '' }
}
},
methods: {
addComment() {
this.post.comments.push({
username: this.comment.username,
content: this.comment.content
})
this.comment.username = ''
this.comment.content = ''
}
},
computed: {
post () {
return this.$route.params.id ? this.$parent.posts[this.$route.params.id] : { title: '', content: '', comments: [] }
}
}
}
</script>
可以看到,在Post.vue
中,我们在文章正文下方添加了一个评论表单,用户输入用户名和评论内容后,点击按钮即可添加评论。在评论下方,我们使用v-for
指令循环展示所有的评论。
最后,我们在路由定义中,再次添加对应的路由设置:
import Home from './components/Home.vue'
import Post from './components/Post.vue'
export default new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/post/:id',
name: 'post',
component: Post
}
]
})
综上所述,以上就是基于Vue.js使用vue-router实现路由设置的完整攻略,我们通过两个示例进一步学习了该插件的基本使用。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解vue-router基本使用 - Python技术站