router4如何在js中控制组件跳转?
router4如何在js中控制组件跳转
繁花不似锦浏览 818回答 1
1回答
-
青春有我
<!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></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><!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></router-view></div><script>var testLogin = Vue.component("login",{template:`<div><h1>这是我的登录页面</h1><router-link to="/myRegister">注册</router-link></div>`/*to后面是路由地址*/})var testRegister = Vue.component("register",{template:`<div><h1>这是我的注册页面</h1></div>`})//配置路由词典const myRoutes =[{path:'',component:testLogin},{path:'/myLogin',component:testLogin},{path:'/myRegister',component:testRegister}]const myRouter = new VueRouter({routes:myRoutes})new Vue({router:myRouter,el:"#container",data:{msg:"Hello VueJs"}})</script></body></html>二、通过js的编程的方式jumpToLogin: function () {this.$router.push('/myLogin');}<!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></router-view></div><script>var testLogin = Vue.component("login",{template:`<div><h1>这是我的登录页面</h1><router-link to="/myRegister">注册</router-link></div>`/*to后面是路由地址*/})var testRegister = Vue.component("register",{methods:{jumpToLogin:function(){this.$router.push('/myLogin');}},template:`<div><h1>这是我的注册页面</h1><button @click="jumpToLogin">注册完成,去登录</button></div>`})//配置路由词典const myRoutes =[{path:'',component:testLogin},{path:'/myLogin',component:testLogin},{path:'/myRegister',component:testRegister}]const myRouter = new VueRouter({routes:myRoutes})new Vue({router:myRouter,el:"#container",data:{msg:"Hello VueJs"}})</script></body></html>
随时随地看视频慕课网APP
相关分类
Vue.js