vue跳转网页的两种方式

网页跳转的两种方式

使用a标签(<router-link>)方式跳转

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/vue-2.4.0.js"></script>
  <script src="js/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
  </div>
  <script>
    var login = {
        template:'<h1>登录</h1>'
    }
    var register = {
        template:'<h1>注册</h1>'
    }
    var router = new VueRouter({
        routes:[
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
        ]
    })
    var vm =  new Vue({
        el:'#app',
        methods:{
        },
        router
    })
  </script>
</body>
</html>

使用window.location.href方式

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/vue-2.4.0.js"></script>
  <script src="js/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <!--<router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>-->
    <div @click="goInfo"> 去注册组件  </div>

    <router-view></router-view>
  </div>
  <script>
    var login = {
        template:'<h1>登录</h1>'
    }
    var register = {
        template:'<h1>注册</h1>'
    }
    var router = new VueRouter({
        routes:[
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
        ]
    })
    var vm =  new Vue({
        el:'#app',
        methods:{
            goInfo(){
                this.$router.push('/register')
            }
        },
        router
    })
  </script>
</body>
</html>

https://router.vuejs.org/guide/essentials/navigation.html

在这里插入图片描述

  • 一定要区分this. r o u t e 和 t h i s . route和this. routethis.router这两个对象
    • this.$route是所有路由的参数对象,params和query都属于它
    • this.$router是路由的导航对象,用它可以方便的使用JS代码,实现路由的前进后退跳转到新的URL地址

↓↓上面网站扒下来的看着方便

程序化导航

除了<router-link>用于为声明性导航创建锚标签之外,我们还可以使用路由器的实例方法以编程方式执行此操作。

router.push(location, onComplete?, onAbort?)

注意:在Vue实例内部,您可以访问路由器实例 r o u t e r 。你可以这样打电话 t h i s . router。你可以这样打电话this. router。你可以这样打电话this.router.push。

要导航到其他URL,请使用router.push。此方法将新条目推送到历史堆栈中,因此当用户单击浏览器后退按钮时,它们将被带到先前的URL。

当您单击a时<router-link>,这是内部调用的方法,因此单击<router-link :to="...">相当于调用router.push(...)

陈述编程
<router-link :to="...">router.push(...)

参数可以是字符串路径或位置描述符对象。例子:

// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

注意params如果path提供了a,则会被忽略,但不是这种情况query,如上例所示。相反,您需要提供name路由或path使用任何参数手动指定整个:

const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// This will NOT work
router.push({ path: '/user', params: { userId } }) // -> /user

相同的规则适用于组件的to属性router-link

在2.2.0+,可选地提供onCompleteonAbort回调router.pushrouter.replace作为第二和第三参数。导航成功完成(在解析所有异步挂钩之后)或中止(导航到同一路线,或在当前导航完成之前到不同路线)时,将调用这些回调。

**注意:**如果目标与当前路由相同且只有params正在更改(例如,从一个配置文件转到另一个配置文件/users/1- > /users/2),则必须使用beforeRouteUpdate以对更改做出反应(例如,获取用户信息)。

router.replace(location, onComplete?, onAbort?)

它的作用就像router.push,唯一的区别是它导航时没有按下新的历史记录条目,顾名思义 - 它取代了当前的条目。

陈述编程
<router-link :to="..." replace>router.replace(...)

router.go(n)

此方法采用单个整数作为参数,指示在历史堆栈中前进或后退的步数,类似于window.history.go(n)

例子

// go forward by one record, the same as history.forward()
router.go(1)

// go back by one record, the same as history.back()
router.go(-1)

// go forward by 3 records
router.go(3)

// fails silently if there aren't that many records.
router.go(-100)
router.go(100)

历史操纵

您可能已经注意到router.pushrouter.replace并且router.go是同行window.history.pushStatewindow.history.replaceState而且window.history.go,和他们做模仿window.history的API。

因此,如果您已熟悉浏览器历史记录API,则使用Vue Router可以非常轻松地操作历史记录。

值得一提的是,Vue的路由器导航方法(pushreplacego)的所有路由器模式一致地工作(historyhashabstract)。

其他

提供前端学习资料,(如mini vue)
学校期末设计服务
简历修改、问题解答
多年大厂经验
可私聊咨询

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值