路由的跳转方式:
-
标签:
<router-link to='/login'></router-link>
-
js:
this.$router.push({path:'/login'})
区别:
this.$router.push() 跳转到指定的url,会向history插入新记录
this.$router.replace() 同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(-1) 常用来做返回,读history里面的记录后退一个
vue-router中的对象:
-
$route 路由信息对象,只读对象
-
$router 路由操作对象,只写对象
//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
//配置路由对象
routes:[
{path:'/login',name:'login',component:Login},
{path:'/register',name:'register',component:Register}
]
})
通过标签:
template:`
<
div
>
<
router-link
to
=
'/login'
>登录</
router-link
>
|
<
router-link
to
=
'/register'
>注册</
router-link
>
<
div
>
<
button
@
click
=
'goregister'
>注册2号</
button>
</
div
>
<
router-view
></
router-view
>
</
div
>
`
通过JS:
methods:{
goregister(){
//push跟replace是达到同样效果,但是replace是不会向history插入记录
// this.$router.push({path:'/register'})
this.$router.replace({path:'/register'})
}
}