目次
ステップ 1: CDN を使用して vue-router プラグインを導入する
ステップ 4: ルーター インスタンス オブジェクトを作成する
ステップ 5: ルーター オブジェクトを vue インスタンスに挿入する
1. 作成から使用へのルーティング
ルーティングは、ルーティングを使用してコンポーネント間のジャンプを実現する、コンポーネントをロードする別の方法と見なすことができます。
Vue-router は、ルーティング機能を提供する Vue のプラグインです。単一ページのプログラムを開発するという目的を達成するために、ルーティングの変更を通じてコンポーネントを動的にロードできます。
1. html ファイルでルーティングを使用する
ステップ 1: CDN を使用して vue-router プラグインを導入する
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js" integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>ステップ 2: コンポーネントを定義する
let aticle={
template:`
<div>文章页面</div>
`
};
let column={
template:`
<div>栏目页面</div>
`
};ステップ 3: ルート オブジェクトの配列を作成する
ルート ルーティング オブジェクト ルーター ルーター オブジェクト ルート ルーティング オブジェクト 配列
let routes=[
{
path: '/',
// 路由重定向 设置刚进入页面时展示哪个页面
redirect: '/article'
},
{
//路径
path:'/article',
//路由路径跳转的组件
component:aticle
// 路由命名
name:'Article',
// 路由别名
alias:'/aa'
},
{
path:'/column',
component:column
}
];ステップ 4: ルーター インスタンス オブジェクトを作成する
ルーター インスタンス オブジェクトを作成し、ルーティング オブジェクトの配列をルーター オブジェクトに挿入します。
let router = new VueRouter({
//routes: routes
//可以简写成：
routes
});ステップ 5: ルーター オブジェクトを vue インスタンスに挿入する
new Vue({
router
});ステップ 6: ルーティングを使用する
は進むべき道を示します
<router-link to="/article">去文章管理</router-link>
<router-link to="/column">去栏目管理</router-link>ルーティング パスに対応するコンポーネントに一致するルーティング出口を提供する必要があります。
<router-view></router-view>例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js"
integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="app">
<!-- 4.使用路由 to表示要去的路由-->
<router-link to="/article">去文章管理</router-link>
<router-link to="/column">去栏目管理</router-link>
<!-- 路由出口 匹配路由路径对应的组件 -->
<router-view></router-view>
</div>
<script>
let article = {
template: `
<div>文章页面</div>
`
};
let column = {
template: `
<div>栏目页面</div>
`
};
// 1.配置路由对象数组
let routes = [
{
path: '/',
// 路由重定向 设置刚进入页面时展示哪个页面
redirect: '/article'
},
{
path: '/article',
component: article
},
{
path: '/column',
component: column
}
];
// 2.创建路由器对象router
let router = new VueRouter({
routes
});
// 3.将路由器对象注入到vue实例中
new Vue({
router,
el: "#app",
data: {
}
})
</script>
</body>
</html>
2. vue-cli でルーティングを使用する
vue-cli をインストールする
npm install -g @vue/cliプロジェクトを作成する
vue create 项目名称1. 上下キーを使用して最後の項目 (手動選択機能を示す) を選択し、Enter を押します。
2.スペースバーを押して選択または選択解除し、次の2つのオプションを選択します。
3. vue2 のバージョンを選択する
4. ルーターは履歴モードを使用していますか? y と入力するか、直接 Enter キーを押します
5. 構成アイテムをどこに配置しますか? package.json で選択
6. 将来のプロジェクトのプリセットとして保存されますか? 直接入力するだけ
7. プロジェクトが作成されるまで待ちます。. .
8. プロジェクトを開始する
ルーティングの使用
ルーティング関連の構成は src-->router-->index.js にあります。コンポーネントまたはビューの下にコンポーネントを記述したり、コンポーネントを格納するフォルダーを作成したりできます。
vue-cli でのルーティングの使用法は、html ファイルの使用手順と同じです。
例:
コンポーネントの下に 2 つのコンポーネントを作成します: A.vue と B.vue
A.vue
<template>
<div>
{
{msg}}
</div>
</template>
<script>
export default {
data(){
return{
msg:"我是A组件"
}
}
}
</script>B.vue
<template>
<div>
{
{msg}}
</div>
</template>
<script>
export default {
data(){
return{
msg:"我是B组件"
}
}
}
</script> 次に、ルーターの下の index.js に移動して、ルーティングを構成します。
最後に、App.vue でルーティングを使用します。
アドレス バーを観察します。ページをクリックしてジャンプすると、後者のアドレスのみが変更されますが、以前の localhost:8080 は変更されません。これは単一ページのアプリケーションです。