vuejs笔记之页面的后退/前进/重定向

责编:menVScode 2017-10-28 23:16 阅读(1495)

返回/回退页面

<button @click="$router.go(-1)">返回</button>

前进

<button @click="$router.go(1)">前进</button>

另一种返回/回退页面的写法

const news = Vue.component( 'news', {
	template: '<div>这里是news页面</div>',
	mounted(){
		console.log(this.$route)
	},
  methods:{
    back:function (argument) {
      this.$router.go(-1);
    }
  }
})


路由重定向redirect

1. 直接写想要跳转的路由 (路由);

const router = new Router({
  routes: [
    {path: '/', component: index},
    {path: '/new', name:'new', component: new},
    {path: '/job',redirect: '/news ' }
  ]
})

2. 通过路由中name属性实现重定向;

const router = new Router({
  routes: [
    {path: '/', component: index},
    // 子路由无需再写 ‘/’
    {path: '/login', name:'login', component: login },
    {path: '/job',redirect:{name:'login'} }
  ]
})

3. 定义函数实现跳转,函数有3个参数:关于路劲参数的对象,获取params方式传递的参数,获取query方式传递的参数。通过判断参数是否要跳转,return 返回就是要跳转的路劲或者是 { name:'' }

<li><router-link :to='{path:"/contact",query:{name:"menvscode",age:12}}'>contact</router-link></li>

const router = new Router({
  routes: [
    {path: '/', component: index},
    // 子路由无需再写 ‘/’
    {path: '/login', name:'login', component: login },
    {path: '/contact', redirect:function (hash,params,query) {
    	console.log(hash)
    	console.log(params)
    	console.log(query)
    	//通过判断参数是否要跳转,return 返回就是要跳转的路劲或者{name:''}
    	// return '/login';
    	return {name:'login'}

    }},
    {path: '/contact11', redirect: ()=>{
    	
    }}
  ]
})

打印 console.log(hash) 的结果:

url

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码