路由
1.Vue-rotuer开发（五步法）
1)新建router目录
通过npm安装vue-router
Npm install --save vue-router
2)在index.js中，导入路由，并且使用Vue.use()安装路由：
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.use(VueRouter);//注册路由3）配置路由(index.js)：导入路由模板，配置路径信息
import content from "@/components/content.vue"///在vue.use之前
export default new Router({
routes: [
{
path : ‘/’, //到时候地址栏会显示的路径
name : ‘Home’,
component : Home // Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.
},
{
path : ‘/content’,
name : ‘Content’,
component : Content
}
],
})又在main.js中引入router,实例化路由
import Vue from 'vue'
import App from './App'
import router from './router'
var vue=new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})4）<router-link :to=”/home”></router-link>路由入口
配置完成后在对应根实例app.vue中添加路由视图<router-view></router-view>来挂载所有路由组件：
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default { }
</script>路由跳转
两种方法：
1.内置<router-link></router-link>组件，它被渲染为<a>标签：
<router-link :to="/about">跳转到about</router-link>
设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
2.使用router实例的方法，比如在about.vue中通过点击事件跳转：
<template>
<div>
<button @click="handleRouter">跳转到user</button>
</div>
</template>
<script>
export default {
methods:{
handleRouter（）{
this.$router.push("/user");
} }
</script>详细栗子：
- 在components文件夹下创建两个文件one.vue和two.vue
<template>
<div class="one">
<p>第一个组件</p>
</div>
</template>Two.vue同上
- 在index.js里面导入one.vue和two.vue文件并且安装路由，配置路径信息
import one from '@/components/one'
import two from '@/components/two'Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/one',
name: 'one',
component: one
},
{
path: '/two',
name: 'two',
component: two
}
]
})2.在main.js中定义路由挂载实例
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.在app.vue里面增添连接router-link，
<template>
<div id="app">
<router-link to="/one">one</router-link>
<router-link to="/two">two</router-link>
<router-view></router-view>
</div>
</template>
