vue router2.0二級(jí)路由的簡(jiǎn)單使用
更新時(shí)間：2017年07月05日 14:19:04 作者：Drox
這篇文章主要為大家詳細(xì)介紹了vue router2.0二級(jí)路由的簡(jiǎn)單使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue router2.0二級(jí)路由的具體代碼，供大家參考，具體內(nèi)容如下
1、app.vue中
<template> <div id="app"> <router-view></router-view> </div> </template>
2、router中index.js(路由的路徑配置)
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Login from '@/components/Login'
import index from '@/components/index'
import Header from '@/components/Header/Header'
import Product from '@/components/Product/Product'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/index',
name: 'index',
component: index,
children: [ //這里就是二級(jí)路由的配置
{
path: '/hello',
name: 'Hello',
component: Hello
},
{
path: '/header',
name: 'Header',
component: Header
},
{
path: '/product',
name: 'Product',
component: Product
}
]
}
]
})
3、下面是我們的index.vue中的代碼
<template>
<div class="aaa">
<div class="list-group">
<router-link to="/hello">Go to hello</router-link>
<router-link to="/header">Go to header</router-link>
<router-link to="/product">Go to product</router-link>
<input type="text" v-model="username">
<button v-click="text"></button>
<router-view></router-view>
</div>
</div>
</template>
4、最后就是新建hello、header、product這幾個(gè)組件來(lái)驗(yàn)證我們的效果，這里就不做演示了，因?yàn)槲易约阂呀?jīng)測(cè)試過(guò)了，沒(méi)有問(wèn)題
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)周日歷切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
在vue-cli的組件模板里使用font-awesome的兩種方法
今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue遠(yuǎn)程加載sfc組件思路詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
新版vue-cli模板下本地開(kāi)發(fā)環(huán)境使用node服務(wù)器跨域的方法
這篇文章主要介紹了新版vue-cli模板下本地開(kāi)發(fā)環(huán)境使用node服務(wù)器跨域的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Vue中this.$router和this.$route的區(qū)別及push()方法
這篇文章主要給大家介紹了關(guān)于Vue中this.$router和this.$route的區(qū)別及push()方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
對(duì)axios進(jìn)行封裝以及將API接口按業(yè)務(wù)模塊統(tǒng)一管理，有助于我們簡(jiǎn)化代碼，方便后期維護(hù)。本文介紹了如何用vue封裝axios請(qǐng)求，感興趣的同學(xué)，可以參考下。2021-06-06
如何使用HBuilderX把vue項(xiàng)目打包成apk
這篇文章主要介紹了如何使用HBuilderX把vue項(xiàng)目打包成apk，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06
Vue使用el-table實(shí)現(xiàn)自適應(yīng)列寬
這篇文章主要為大家詳細(xì)介紹了Vue使用el-table實(shí)現(xiàn)自適應(yīng)列寬，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家學(xué)習(xí)介紹了如何利用Vue2實(shí)現(xiàn)全局水印的效果，文中的示例代碼簡(jiǎn)潔易懂，具有一定的借鑒價(jià)值，感興趣的小伙伴可以了解下2023-07-07