vue基礎学習(四)-ルーティング

1.ルーティングとは何か:router-ルーティングは、アドレスとコンポーネントの対応関係(urlアドレス、ページレベルのコンポーネント)を定義します.
 
2.ルーティングの作成
      1.プロジェクトの作成時にルーティングを作成する
vueプロジェクトの作成時にルーティングを作成する
構築vueプロジェクト:node環境でvue-cli足場を利用して構築プロジェクト
(1)グローバルマウント足場-npm i@vue/cli-g/yarn global add@vue/cli
(2)足場が正常に取り付けられているかどうかを確認する:vue-V
(3)プロジェクトvue createプロジェクト名の作成開始=』プロンプトに従ってインストールを行い、あるステップでrouter=)をチェックすると自動的にダウンロードされ、ルーティングファイルが構成されます
    2.プロジェクトができたらrouterを使いたい
(1)コマンドによるnpm i vue-router/yarn add vue-routerのダウンロード
(2)packageに依存する.jsonでダウンロードに成功したかどうかを確認
(3)srcにrouterフォルダを作成しindexを作成する.jsは次のコードを書きます
              

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    // component: Home
    redirecit:'/home'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/About.vue')
  },
  {
    path: '/news',
    name: 'news',
    component: () => import('../views/News.vue'),
    children:[  //      
        {
            path:'',
            name:'newslist',
            component:() => import('../views/News/NewsList.vue')
        },
        {
            path:'/news/newslist',
            name:'newslist',
            component:() => import('../views/News/NewsList.vue')
        },
        {
            path:'newevent',
            name:'newevent',
            component:() => import('../views/News/NewsEvents.vue')
        },
        {
            path:'newstime',
            name:'newstime',
            component:() => import('../views/News/NewsTime.vue')
        }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

(4)main.jsでの導入と使用
        

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3.ルーティングの使用
router-link,router-viewによるルーティングの使用to-構成のルーティングアドレス

4.経路変更の傍受
3つの概念を理解する
(1)route:異なるアドレスに基づいて異なる内容を示すルーティングです
(2)routes:ルーティングのセット
(3)router:ルーティングを管理するメカニズム
経路変更の監視

watch:{
  $route(to,from){
    console.log(to.path);
  }
}