ディレクトリ
使用にVueのルーティングシンプル
1. VueRouter
-1中国の公式ウェブサイト：https://router.vuejs.org/zh/
-2.VueROuter英語公式サイト：https://router.vuejs.org/
2.Vueルーティングの設定：
2.1インストールVueのルート
npm install vue-router --save / cnpm install vue-router --save導入2.2とVue.use（VueRouter）（main.jsエントリファイルの書き込み）
import VueRouter from 'vue-router'
Vue.use(VueRouter)2.3ルーティングの設定
2.3.1コンポーネント導入コンポーネントを作成
//1.创建组件,引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';2.3.2ルート（推奨コピー）を定義
//2.配置路由 注意名字
const routes=[
{ path: '/home',component:Home},
{path:'/news', component:News},
{ path: '*', redirect:'/home'}//使用重定向和别名配置默认跳转路由
]VueRouterの2.3.3例
//3.实例化VueRouter
const router=new VueRouter({
routes //（缩写）相当于 routes：routes
})2.3.4マウントルーティング
new Vue({
el: '#app',
router,
render: h => h(App)
})2.3.5ラベル導入
//5.把<router-view></router-view>放在根组件App.vue里3.特定のコードの実装
2つの単純なコンポーネントは、3.1を搭載し
<template>
<div id="home">
<h2>我是home组件</h2>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
<template>
<div id="news">
<h2>我是news组件</h2>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
設定3.2 main.jsエントリファイル
import Vue from 'vue'
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件,引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由 注意名字
const routes=[
{ path: '/home',component:Home},
{path:'/news', component:News},
{ path: '*', redirect:'/home'}//使用重定向和别名配置默认跳转路由
]
//3.实例化VueRouter
const router=new VueRouter({
routes //（缩写）相当于 routes：routes
})
//4.挂载路由 router
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5.把<router-view></router-view>放在根组件App.vue里3.3アセンブリに配置されApp.vue
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg:'你好vue'
}
}
}
</script>
<style lang="scss">
</style>