新增组件的时候 怎么在router.js里面配置

JavaScript06

新增组件的时候 怎么在router.js里面配置,第1张

首先在app.vue里面有这么一段然后你所点击的按钮其实是这个东西，这个其实就是个封装完的a标签你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了

js调用不是自己的子路由步骤。

1、获取url跟目录下的字符。

2、创建一个路由模块文件router.js，下面代码分别由login和register。

3、创建两个html文件，login.html和register.html。

（1）监听地址栏的变化

（2）根据地址栏的变化切换到对应的组件

1、创建一个vue项目：vue create routerdemo

注意：在选择插件的时候只选择babel

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

3、创建路由：src下新建router.js，抛出router实例

import Vue from "vue"

// 引入vueimport Router from "vue-router"

// 引入vue-routerVue.use(Router)

// 使用路由import Recommend from "./Recommend.vue"

// 引入Recommend

组件import Singer from "./Singer.vue"

// 引入Singer组件const router=newRouter({// 实例化router对象mode:"hash",

// 使用hash路由，带#号routes:[

// 路由的配置项{path:"/recommend",component:Recommend},

// recommend路径对应Recommend组件{path:"/singer",component:Singer},

// singer路径对应Singer组件    ]

})

export defaultrouter// 抛出路由

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