Vue通过JS跳转路由

JavaScript036

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

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

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

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

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

vue.js路由使用方法:vue1.0的方法

<html>

<a href="#" v-link="{path:'/login'}">登陆</a>

<router-view></router-view>//内容显示的

<script>

//1、准备一个根组件

var App = Vue.extend()

//2、准备组件

var Login = Vue.extend({

template:{<h3>登陆页面</h3>}

})

//3、准备路由 var router = new vueRouter()

//4、关联组件和路径

router.map({

'login':{

component:Login   //组件名称

}

})

//5、启动路由

router.start(App,'#box')

//6、默认跳转页面(不是必须) router.redirect({'/':'login'})

</script>

</html>