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-爲配置的路由地址

<template>
  <div class="news">
    <div class="left">
        <router-link to='/news/newslist'>新聞列表</router-link>
        <router-link to='/news/newevent'>新聞事件</router-link>
        <router-link to='/news/newstime'>新聞時間</router-link>
    </div>
    <div class="right">
        <router-view></router-view>
    </div>
  </div>
</template>

4.監聽路由的改變

   理解三個概念

      (1)route：它是一條路由，根據不同的地址展示不同的內容 

    （2）routes：它是一組路由

      (3)router：是一個機制，它來管理路由

  監聽路由變化

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