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);
  }
}