ルーティングを使用してVueのルータ

免責事項：この記事はブロガーオリジナル記事ですが、許可ブロガーなく再生してはなりません。

インストールのルーティング npm install vue-router

router.jsを作成（及び対応するコンポーネントは、ルーティングアドレスを構成するために使用されている、等）

import Vue from 'vue' 
import Router from 'vue-router'   //引入vue及路由
Vue.use(Router)   //使用路由

//组件模块
import HelloWorld from './components/HelloWorld'
import Footer from './components/Footer'
import Header from './components/Header'
// 导入组件进行路由配置

export default new Router({
    mode:'history',    //配置模式为history模式，对应还有hash模式(#)
    routes: [
        { path: '/', name: 'home', component: HelloWorld },  
        { path: '/header', name: 'Header', component: Header },
        { path: '/footer', name: 'Footer', component: Footer }
    ]
     //path:对应路由路径  component:对应路由组件
})
复制代码

main.jsで

import router from './router'  //引用router
new Vue({
  render: h => h(App),
  router,                //new Vue实例内使用router
}).$mount('#app')
复制代码

App.vueにおいて、ルーティングは対応するセットを完了する

<template>
  <div id="app">
    <router-link to='/home'><button>home</button></router-link><br>   
    <router-link to='/header'>test</router-link><br>
    <router-link to='/footer'>test</router-link>
        //router-link将渲染为a标记,to将渲染为href属性，对应to的值为路由配置中的path值
    <router-view></router-view>        //router-view指定路由出口
  </div>
</template>
复制代码

ます。https：//juejin.im/post/5cfdc8d26fb9a07ef443faf3で再現