Vue-Router实现组件间跳转的三种方法_vue路由跳转的三种方式 - CSDN文库

19 浏览量更新于2023-05-04 收藏 42KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

Vue-Router实现组件间跳转的三种方法实现组件间跳转的三种方法

通过VueRouter来实现组件之间的跳转，供大家参考，具体内容如下

提供了3种方式实现跳转：

①直接修改地址栏中的路由地址

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

</head>

<body>

<div id="container">

<p>{{msg}}</p>

<router-view></router-view>

</div>

<script>

var testLogin = Vue.component("login",{

template:`

<div>

<h1>这是我的登录页面</h1>

</div>

`

})

var testRegister = Vue.component("register",{

template:`

<div>

<h1>这是我的注册页面</h1>

</div>

`

})

//配置路由词典

//对象数组

const myRoutes =[

//当路由地址：地址栏中的那个路径是myLogin访问组件

//组件是作为标签来用的所以不能直接在component后面使用

//要用返回值

//path:''指定地址栏为空：默认为Login页面

{path:'',component:testLogin},

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

const myRouter = new VueRouter({

//myRoutes可以直接用上面的数组替换

routes:myRoutes

})

new Vue({

router:myRouter,

//或者：

/*

router:new VueRouter({

routes:[

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

] })

*/

el:"#container",

data:{

msg:"Hello VueJs"

}

})

</script>

</body>

</html>

②通过router-link实现跳转

<router-link to="/myRegister">注册</router-link>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38500222

粉丝: 5
资源: 914

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈