1. ターゲット フォルダーで、直接「cmd」と入力して Enter キーを押します。次の dos ウィンドウが表示されたら、次のコマンドを直接入力して、webpack に基づいて新しい vue プロジェクトを作成します。設定手順はスキップされます。この記事の焦点はネストされています。ルーティングとパラメータ転送。
vue init webpack test01
2. エディター (私は idea を使用) を使用して、新しく作成したプロジェクトを開き、src ディレクトリに新しいビュー フォルダーを作成し、このフォルダー内に親ルートとしてファイル About.vue を作成し、AboutUs.vue と AboutCon を作成します。 2 つの vue ファイルは次のようなサブルーティング コードです。
このうち、to="/about/con/notification 2"、notification 2 は親ルートから子ルート
About.vueに渡されるパラメータです。
<template>
<div>
<!-- 添加子路由的跳转连接-->
<router-link to="/about/us">关于我们</router-link>
<router-link to="/about/con/通知2">联系我们</router-link>
<!-- 指定子路由的加载位置-->
<router-view/>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
<style scoped>
</style>
AboutUs.vue
<template>
<div>
<p>关于我们</p>
</div>
</template>
<script>
export default {
name: 'AboutUs'A
}
</script>
<style scoped>
</style>
AboutCon.vue、{ {$route.params.info}} は、親ルートからデータを受信するために使用されます。 info はカスタム パラメーター名です。
<template>
<div>
<p>联系我们{
{$route.params.info}}</p>
</div>
</template>
<script>
export default {
name: 'AboutCon'
}
</script>
<style scoped>
</style>
3. ルーティング構成ファイル (ルーター フォルダーの下のindex.js) にサブルートを追加します (パス: 'con/:info' は、パラメーターを con のサブルートに渡すことを意味します。カスタム パラメーターは info と呼ばれます)。コロン、
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/about',
name: 'About',
// 异步加载页面，减轻前端负载
component: () => import('../views/About'),
// 重定向us的对应页面为about下的子路由首页
redirect: '/about/us/',
children: [
{
// 注意：二级路由不要/
path: 'us',
name: 'us',
component: () => import('../views/AboutUs')
},
{
path: 'con/:info',
name: 'con',
component: () => import('../views/AboutCon')
}
]
}
]
})
4. 最後に App.vue ページを変更します。コードは次のとおりです。
<template>
<div id="app">
<!-- 添加子路由的跳转连接-->
<router-link to="/about">关于</router-link>
<!-- 指定子路由的加载位置-->
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
},
data () {
return {
message: '你好，Vue！'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5. ターミナルに「npm run dev/server」と入力してプロジェクトを開始します。