Vue--路由

main.js:

1、先在项目安装路由模块：npm install vue-router --save-dev
2、使用路由：main.js首先要引用vue模块：

import Vue from 'vue'

3、再引用路由模块：

import VueRouter from ‘vue-router’

4、使用VueRouter：

Vue.use(VueRouter)

5、配置路由：

import Home from './components/home' /父级组件
import HelloWorld from './components/HelloWorld' /子组件


const router = new VueRouter({
    routes:[
        {path:‘/’,component:Home}//主页地址
        {path:‘/helloworld’,component:HelloWorld}//地址
    ]，
　　　　 mode：‘history’　　//添加这个属性后页面地址就不存在#/的问题
})

6、引用配置好的路由router：

new Vue({
   router,
　　el:'#app'
   components: { App },//这是根组件
　　templater:'<App/>'
})

根目录：这里是App.vue

7、找到路径后，在根组件展示：

<router-view></router-view>

此时刷新界面页面地址变成http://localhost:8080/#/，

当在地址输入http://localhost:8080/#/helloworld，就会跳转到helloworld这个界面

7、写到这里就可以使用a标签跳转了

但是会刷新界面

根目录：App.vue

<templater>
    <div id='app'>
        <router-view></router-view>
        <ul>
　　　　　　<li><a href='/'>home</a></li>　　//href的地址必须是配置路由的地址
          <li><a href='/helloworld'>hello</a></li>　　//href的地址必须是配置路由的地址
　　　　 </ul>　　
    </div>
</templater>

8、路由跳转：

不会刷新界面，高效率！

<templater>
    <div id='app'>
        <router-view></router-view>
        <ul>
　　　　　　<li><router-link to='/'>home</router-link></li>　　//href的地址必须是配置路由的地址
          <li><router-link to='/helloworld'>hello</router-link></li>　　//href的地址必须是配置路由的地址
　　　　 </ul>　　
    </div>
</templater>