Vue.js路由组件vue-router使用方法详解

更新时间：2016年12月02日 14:23:07 作者：muyuren

这篇文章主要为大家详细介绍了Vue.js路由组件vue-router使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染即可。

一、普通方式基本例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue-router使用方法</title>
</head>
<body>
 <div id="app">
 <h1>Hello App!</h1>
 <p>
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>
 </p>
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
 </div>
 <script src="http://9i0i.com/pic.php?p=https://unpkg.com/vue/dist/vue.js"></script>
 <script src="http://9i0i.com/pic.php?p=https://unpkg.com/vue-router"></script>
 <script>

 // 1. 定义（路由）组件。
 // 可以从其他文件 import 进来
 const Foo = { template: '<div>foo</div>' }
 const Bar = { template: '<div>bar</div>' }

 // 2. 定义路由
 // 每个路由应该映射一个组件。 其中"component" 可以是
 // 通过 Vue.extend() 创建的组件构造器，
 // 或者，只是一个组件配置对象。
 const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
 ]

 // 3. 创建 router 实例，然后传 `routes` 配置
 const router = new VueRouter({
 routes // （缩写）相当于 routes: routes
 })

 // 4. 创建和挂载根实例。
 // 记得要通过 router 配置参数注入路由，
 // 从而让整个应用都有路由功能
 const app = new Vue({
 router
 }).$mount('#app')

 // 现在，应用已经启动了！
 </script>
</body>
</html>

二、块化机制编程基本例子，以在vue-cli中的使用方法为例

安装vue-router插件

# npm install vue-router --save-dev

在src文件夹下面的components文件夹下新建Foo.vue、Bar.vue两个组件，在Foo组件写入以下内容

<template>
 <div>foo</div>
</template>

在Bar.vue组件中写入以下内容

<template>
 <div>bar</div>
</template>

打开src文件夹下面的app.vue文件，修改代码为

<template>
 <div id="app">
 <router-view
 class="view"
 keep-alive
 transition
 transition-mode="out-in">
 </router-view>
 </div>
</template>

这里用 router-view 来把刚才新建的两个页面加载到这里来，修改src文件夹下面的main.js文件

import Vue from 'vue'
import App from './App'
//引用路由插件
import VueRouter from 'vue-router'

//使用路由插件
Vue.use(VueRouter)

//引入组件 
import Foo from './components/Foo'
import Bar from './components/Bar'

const routes = [
 { path: '/foo/' , component: Foo }，
 { path: '/bar/' , component: Bar }，
]

//使用路由规则
const router = new VueRouter({
 routes
})
//加载路由规则
new Vue({
 router,
 el: '#app',
 render:h => h(App)
})

然后运行npm run dev查看效果吧。

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

使用vue.js实现联动效果的示例代码
本篇文章主要介绍了使用vue.js实现联动效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
vue中多路由表头吸顶实现的几种布局方式
这篇文章主要介绍了vue项目多路由表头吸顶实现的几种布局方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)
本文给大家分享Vue 父子组件实现数据双向绑定效果的两种方式，方式一是通过监听事件实现方式二是通过 v-model 实现，每种方式结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2022-11-11
Django+Vue实现WebSocket连接的示例代码
这篇文章主要介绍了Django+Vue实现WebSocket连接的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
详解如何使用Object.defineProperty实现简易的vue功能
这篇文章主要为大家介绍了如何使用Object.defineProperty实现简易的vue功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
基于element日历组件实现签卡记录
这篇文章主要为大家详细介绍了基于element日历组件实现签卡记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
深入了解Vue Pinia持久化存储二次封装
Pinia 是2019年由vue.js官方成员重新设计的新一代状态管理库,类似Vuex,下面我们就来学习一下如何通过Pinia实现持久化存储的相关知识,感兴趣的小伙伴可以了解下
2023-12-12
Vue 过渡实现轮播图效果
本篇文章主要介绍了Vue 过渡实现轮播图效果，Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。
2017-03-03
基于Vue组件化的日期联动选择器功能的实现代码
这篇文章主要介绍了基于Vue组件化的日期联动选择器的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
Vue+Django项目部署详解
这篇文章主要介绍了Vue+Django项目部署详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05