ルーティングを使用してページの部分的な更新を実現する単一のページの場合は、
最初にvueファイルとvue-routerファイルが必要です
。cdnやnpmなどの複数のインストール方法を使用できます。ここでは詳しく説明しません。 。検索するだけです。次に、htmlページ構造を作成し、vue-routerリソースを導入するだけです。
簡単なジャンプです。コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一</title>
<script src="./vue.min.js"></script>
<script src="./vuex.min.js"></script>
<script src="./vue-router.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./axios.min.js"></script>
</head>
<body>
<div id="app">
!-- 登录表单 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="用户名">
<el-input placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button type="danger" @click="logout">退出</el-button>
</el-form-item>
</el-form>
<!-- 在这里渲染路由 -->
<router-link to="/login">1</router-link>
<router-link to="/logout">2</router-link>
<router-view></router-view>
</div>
</body>
<script>
// 定义组件
let login = {
template:`
<div>请登录<div>
`
};
let logout ={
template:`
<div>已登录<div>`
}
// 定义路由,每个路由应该映射一个组件。 其中"component" 可以是
//通过 Vue.extend() 创建的组件构造器，
let routes =[
{
path:'/login',component:login},
{
path:'/logout',component:logout}
]
// 创建一个vue-router实例,然后传 `routes` 配置参数,你还可以传别的参数
var router = new VueRouter({
routes:routes
})
// 定义一个vue实例
new Vue({
el:"#app",
data(){
return {
username:"",
password:""
}
},
methods:{
login(){
this.$router.push({
path:'/login'})
},
logout(){
this.$router.push({
path:'/logout'})
}
},
// 注入router
router
})
</script>
</html>
ステップ1：2つ以上のコンポーネントをカスタマイズして、必要なページを表示します
ステップ2：ルートを定義しますパスとコンポーネントはパスパラメーターであり、コンポーネント名には任意の名前を付けることができます
ステップ3：ビュールーターインスタンス、ルートを作成します過去の
IVでパスを定義します。次のステップは、<router-link to='路径参数'></router-link>ナビゲーションを使用してページをレンダリング<router-view></router-view>することです。この場所をレンダリングするためにレンダリングするコンポーネントは、そのレンダリングに必要なものが存在し、<router-view></router-view>任意の位置に配置できます。
効果を図に示します:(デフォルトはタグとしてレンダリングされます）
クリックした後
、ボタンにバインドする場合は、2つのボタンに2つのイベントを追加するだけで、対応するメソッドで追加できます。 （ログインボタンと終了ボタンを拘束コードは、2つの方法が対応するログイン（）およびログアウトに追加された（））、this.$router.push({path:'/login'})することができます
注：Vueの例の内側に、あなたは$ルータによってルーティングインスタンスにアクセスすることができます。したがって、これを呼び出すことができます。$ Router.push時刻
をクリックする<router-link>と、このメソッドが内部的に呼び出されるため、クリック<router-link to="...">はrouter.push(...)。を呼び出すのと同じです。