vue中路由的使用

路由：

　　（1）監聽地址欄的變化

　　（2）根據地址欄的變化切換到對應的組件

 

使用路由：

1、創建一個vue項目：vue create routerdemo

　　注意：在選擇插件的時候只選擇babel

　　

2、安裝路由插件：npm install vue-router

3、創建路由：src下新建router.js，拋出router實例

import Vue from "vue";// 引入vue
import Router from "vue-router";// 引入vue-router
Vue.use(Router);// 使用路由

import Recommend from "./Recommend.vue";// 引入Recommend組件
import Singer from "./Singer.vue";// 引入Singer組件

const router=new Router({// 實例化router對象
    mode:"hash",// 使用hash路由，帶#號
    routes:[// 路由的配置項
        {path:"/recommend",component:Recommend},// recommend路徑對應Recommend組件
        {path:"/singer",component:Singer},// singer路徑對應Singer組件
    ]
});

export default router;// 拋出路由

 

4、使用路由：js的入口文件main.js中引入並使用　　

　　

 

 5、在根組件App.vue中  router-view  開辟一塊空間：

　

 

 6、地址欄后面輸入路徑顯示對應的組件：

　　

　　　　插一句：3002的端口號是在vue.config.js中配置的：

　　　　module.exports={
    　　　　devServer:{
        　　　　port:3002
   　　　　 }
　　　　}

 

7、router-link標簽，點擊跳轉　　

        <router-link to="/recommend" tag="div" activeClass="active">推薦</router-link>

        <router-link to="/singer" tag="div" activeClass="active">歌手</router-link>

 

        　　to：跳往的路徑

       　　 tag：要渲染成的標簽，默認是a標簽

     　　   activeClass：當前標簽添加類名