前言
vue一个重要的方面就是路由，下面是自己写的一个路由的例子分享给大家供大家参考学习，下面来看看详细的介绍。
方法如下：
1、引入依赖库就不必再说
2、创建组件
两种写法
第一种：间接
rush:xhtml;">
Home
{{msg}}
vue一个重要的方面就是路由，下面是自己写的一个路由的例子分享给大家供大家参考学习，下面来看看详细的介绍。
两种写法
第一种：间接
{{msg}}
template: '#about'
});
第二种：直接
template: '
This is the tutorial out vue-router.
});
routes: [
{ path: '/路径',component: 组件名 },{ path: '/',component: 组件名},//设置默认路径
{ path: "*",component:Home }//路径不存在
]
});
router: router }).$mount('#app');
<html lang="en">
<Meta charset="UTF-8">
<div id="app">
<router-link to="/home">Go to Home
<router-link to="/about">Go to About
<router-link to="/out">Go to Out
<template id="home">
<h1>Home</h1>
<p>{{msg}}</p><template id="about">
<h1>about</h1>
<p>This is the tutorial about vue-router.</p><script src="../js/vue2.0.js" type="text/javascript" charset="utf-8">
<script src="lib/vue-router.min.js" type="text/javascript" charset="utf-8">
<script type="text/javascript">
/ 1、创建组件 /
var Home = Vue.extend({
template: '#home',data: function() {
return {
msg: 'Hello,vue router!'
}}
});
var About = Vue.extend({
template: '#about'
});
var Out = Vue.extend({
template: '
This is the tutorial out vue-router.
});
// 2. 创建 router 实例，然后传 routes路由映射 配置
var router = new VueRouter({
routes: [
{ path: '/home',component: Home },{ path: '/about',component: About },{ path: '/out',component: Out },{path: '/',//设置默认路径
{ path: "*",component:Home }//路径不存在
]
});
// 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
var vm = new Vue({
router: router }).$mount('#app');
// 现在，应用已经启动了！