Vue通过JS跳转路由

JavaScript028

Vue通过JS跳转路由,第1张

这里我们通过输出$router来查看,其中push和replace函数就是跳转其他路由的函数

其中push函数是跳转新的路由,跳转后可以通过浏览器的回退功能回退到上一个路由

添加gotoCircle函数,这里我们使用push函数做演示,replace函数的传参和push一样,就不多做演示了

这里的传参与上面v-bind绑定的参数一样都是传一个对象,运行效果如下:

电脑设置和路由器网络连接方法:

【家庭网络环境布线】:

1、有猫(modem):猫(modem)----路由器wan口;路由器lan口----电脑。

2、没有猫(modem):网线----路由器wan口;路由器lan口----电脑。

【设置电脑IP、DNS自动获取方法】:

win7系统设置方法:

右键点击【网络】→属性【更改适配器设置】→【本地连接】→【右键点本地连接属性】→【双击TPC/IP协议】→【然后点击“自动获取ip地址”】、【然后点击“自动获取DNS”服务器地址】→【单击确定】。

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