使用Vue中的router路由

要使用Vue路由,首先需要在项目启动前安装router
安装方法 :  npm install vue-router --save-dev
安装完毕后,输入npm run dev启动项目

首先配置main.js

import Vue from 'vue'
import App from './App.vue'   //主组件
import HelloWorld from './components/HelloWorld.vue'  //Helloworld组件
import Home from './components/Home.vue'  //Home组件

// (1):使用路由先引入路由地址
import VueRouter from 'vue-router'
Vue.config.productionTip = false; //取消掉生产提示
// (2):使用中间件注明使用路由
Vue.use(VueRouter);
// (3):配置路由
const router = new VueRouter({
    routes:[
        {path:"/",component:Home},                  //   把路由的根路径设置为Home组件地址
        {path:"/HelloWorld",component:HelloWorld}   //   配置HelloWorld路径地址
    ]
});

/* 主JS创建Vue对象 */
new Vue({
//(4):在实例化对象中使用router路由
    router, //实例化路由
    el: '#app',
    components: { App },
    template: '<App/>'
});

再在App.vue中使用<router-view></router-view> 标签引入路由

<template>
  <div>
    <!--使用router-link标签代替a标签去做跳转,最终页面上渲染出来还是一个a标签-->
    <li> <router-link to="/">去往Home</router-link> </li>
    <li> <router-link to="/HelloWorld">去往HelloWorld</router-link> </li>
    <br>
    <!-- 在首页引入路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name:"app",
        data () {
            return {
            }
        }
    }
</script>

在src中的components文件夹下配置HelloWorld文件

<template>
  <div>
    HelloWorld页面
  </div>
</template>
<script>
    export default {
        name:'HelloWorld',
        data () {
            return {
            }
        },
    }
</script>

在src的components文件夹下配置Home文件

<template>
    <div>
        Home页面
    </div>
</template>
<script>
    export default {
        name:"Home",
        data () {
            return {
            }
        }
    }
</script>

main.js中app.vue为项目主组件,在main.js中配置路由的时候,routes的地址  '/'  标签项目进入就直接出现的地址.