ホームページ > 記事 > ウェブフロントエンド > コンポーネントを相互にジャンプする方法
コンポーネントを相互にジャンプする方法
- php中世界最好的语言オリジナル
- 2018-04-14 17:16:581661ブラウズ
今回は、コンポーネントを相互にジャンプする方法と、コンポーネントを相互にジャンプするための注意事項について説明します。以下は実際のケースです。見てみましょう。
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>
<p id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</p>
<script>
var testLogin = Vue.component("login",{
template:`
<p>
<h1>这是我的登录页面</h1>
</p>
})
var testRegister = Vue.component("register",{
template:`
<p>
<h1>这是我的注册页面</h1>
</p>
})
//配置路由词典
//对象数组
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 to="/myRegister">注册</router-link>rreee ③js
のプログラミングメソッドを通して コード
{{msg}}
<script> var testLogin = Vue.component("login",{ template:` <p> <h1>这是我的登录页面</h1> <router-link to="/myRegister">注册</router-link> </p> ` /*to后面是路由地址*/ }) var testRegister = Vue.component("register",{ template:` <p> <h1>这是我的注册页面</h1> </p> }) //配置路由词典 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>
jumpToLogin: function () {
this.$router.push('/myLogin');
} この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がコンポーネントを相互にジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。