vue中路由的使用

Posted 2021-03-11 ggbondlearn

路由：

　　（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：当前标签添加类名