VUE路由

首先需要安装好router相关库

npm install vue-router

main.js文件

import Vue from 'vue'
import App from './App.vue';
import Router from 'vue-router';
import router from './router'//路由文件
Vue.config.productionTip = false
Vue.use(Router)
new Vue({
  render: h => h(App),
  router,
}).$mount('#app');

router.js文件

import Vue from 'vue'
import Router from 'vue-router' //配置路由
import signIn from "./components/signIn.vue" // import 进来写好的组件
import HelloWorld from "./components/HelloWorld.vue";
Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/signIn',
            name: 'signIn',
            component: signIn
        }
    ]
})

components/signIn.vue 写好需要代码

<template>
  <div >   
      <div >岛屿摄影工作室登录系统</div>  
  </div>
</template>

components/HelloWorld.vue文件用登录代码如下 router-link标签相当于a标签

<template>
  <div > 
 <router-link to="/signIn" ">登录</router-link>
 </div>
</template>