vue基础学习(四)路由

1.什么是路由&＃xff1a;router - 路由定义了地址和组件的一一对应关系&＃xff08;一个url地址&＃xff0c;对应一个页面级别的组件&＃xff09;

2.创建路由

      1.创建项目时创建路由

             在进行vue项目创建的时候进行创建路由

             搭建vue项目&＃xff1a;node环境下利用vue-cli脚手架搭建项目

                  (1)全局安装脚手架 - npm i &＃64;vue/cli -g   /   yarn global add &＃64;vue/cli

                &＃xff08;2)检查脚手架是否安装成功&＃xff1a; vue -V 

                &＃xff08;3)开始创建项目 vue create 项目名  &＃61;》回车根据提示进行安装&＃xff0c;在某一步勾选router &＃61;》将会自动下载并配置好路由文件

    2.项目搭建好后想使用router

             (1)利用命令进行下载  npm i vue-router/yarn add vue-router

             (2)依赖package.json中查看是否下载成功

             (3)在src中创建router文件夹并创建index.js 写如下代码

import Vue from &＃39;vue&＃39;
import VueRouter from &＃39;vue-router&＃39;
import Home from &＃39;../views/Home.vue&＃39;Vue.use(VueRouter)const routes &＃61; [{path: &＃39;/&＃39;,name: &＃39;home&＃39;,// component: Homeredirecit:&＃39;/home&＃39;},{path: &＃39;/home&＃39;,name: &＃39;home&＃39;,component: Home},{path: &＃39;/about&＃39;,name: &＃39;about&＃39;,component: () &＃61;> import(&＃39;../views/About.vue&＃39;)},{path: &＃39;/news&＃39;,name: &＃39;news&＃39;,component: () &＃61;> import(&＃39;../views/News.vue&＃39;),children:[ //配置二级路由{path:&＃39;&＃39;,name:&＃39;newslist&＃39;,component:() &＃61;> import(&＃39;../views/News/NewsList.vue&＃39;)},{path:&＃39;/news/newslist&＃39;,name:&＃39;newslist&＃39;,component:() &＃61;> import(&＃39;../views/News/NewsList.vue&＃39;)},{path:&＃39;newevent&＃39;,name:&＃39;newevent&＃39;,component:() &＃61;> import(&＃39;../views/News/NewsEvents.vue&＃39;)},{path:&＃39;newstime&＃39;,name:&＃39;newstime&＃39;,component:() &＃61;> import(&＃39;../views/News/NewsTime.vue&＃39;)}]}
]const router &＃61; new VueRouter({routes
})export default router


     &＃xff08;4&＃xff09;在main.js中进行引入并使用

import Vue from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router&＃39;Vue.config.productionTip &＃61; falsenew Vue({router,render: h &＃61;> h(App),
}).$mount(&＃39;#app&＃39;)


3.使用路由

       利用router-link ,router-view进行路由的使用 to-为配置的路由地址

4.监听路由的改变

   理解三个概念

      (1)route&＃xff1a;它是一条路由&＃xff0c;根据不同的地址展示不同的内容 

    &＃xff08;2&＃xff09;routes&＃xff1a;它是一组路由

      (3)router&＃xff1a;是一个机制&＃xff0c;它来管理路由

  监听路由变化

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