Vue-router learning01
概述:vue-router 是WebApp鏈接路徑管理系統。
安裝 vue-router
npm install vue-router --save-dev
路由文件 router/index.js:
import Vue from ‘vue‘ //引入Vue import Router from ‘vue-router‘ //引入vue-router import Hello from ‘@/components/Hello‘ //引入Hello.vue組件 Vue.use(Pouter) //全局使用router export defaultnew Router({ routes: [ { //每一個鏈接都是一個對象 path: ‘/‘, name: ‘Hello‘, //路由名稱 component: Hello //對應的組件模板 } ] })
添加文件components/demo.vue:
<template> <div class="demo"> <h4>{{ msg }}</h4> </div> </template> <script> exportdefault { name: ‘demo‘, data() { return { msg: ‘Hello I am demo.vue‘ } } } </script>
引入demo組件:
import demo from [email protected]/demo‘
配置路由:
{ path: ‘/demo‘, name: ‘demo‘ component: demo }
通過以上操作,我們就有了兩個頁面,通過改變地址欄可以看到 hello.vue 頁面的內容和 demo.vue 頁面的內容,接下來我們來實現導航制作。
制作導航:
<router-link to=‘path‘>導航文字</router-link>
path為index.js中配置的path值。
通過以上代碼,我們算是了解了vue-router的基本用法,接下來我們認識子菜單的路由方法。
在App.vue頁面進行代碼編寫:
<p>導航 :
<router-link to="/">首頁</router-link> |
<router-link to="/dmoe">dmoe頁面</router-link> |
<router-link to="/demo/Cdemo">Cdemo頁面</router-link> |
</p>
接下來編寫demo頁面:
<template> <div class="demo"> <h4>{{ msg }}</h4> <router-view class=‘Cdemo‘><router-view> </div> </template> <script> export default { name: ‘demo‘, data() { return { msg: ‘Hello I am demo.vue‘ } } } </script>
router-view 給子模版提供插入的位置。
新建Cdemo組件模板:
<template> <div class="Cdemo"> <h4>{{ msg }}</h4> </div> </template> <script> export default { name: ‘Cdemo‘, data () { return { msg: ‘Hello I amCdemo‘ } } }
引入Cdemo:
import Cdemo from [email protected]/Cdemo‘
配置路由,由於Cdemo為子路由,在原有的路由配置下加入children字段:
children: { {path: ‘/‘,component: Cdemo} {path: ‘Cdemo‘,component: Cdemo} }
子路由在現實中使用還是比較常用的,需要熟練的掌握。
vue-router參數傳遞:
name傳值並被顯示在模板裏,路由文件中路由配置的name屬性在模板中用 $router.name 接收:
<p>{{ $route.name}}</p>
<router-link>標簽中的to屬性傳值:
<router-link :to="{name:xxx,params:{key:value}}">link</router-link>
此處需要註意to要進行綁定。name:路由配置文件中的name值。params:要傳遞的參數。
編寫App.vue頁面:
<router-link :to="{name:‘Cdemo‘,params:{username:‘momei‘}}">Cdemo</router-link>
修改路由配置:
{path:‘/Cdemo‘,name:‘Cdemo‘,component:Cdemo},
完成上面的操作之後在Cdemo.vue中進行接收。
{{$route.params.username}}
額頁面輸出momei。
多路由區域操作
建立一個新項目,打開App.vue用router-view標簽進行布局。
<router-view ></router-view> <router-view class="fl_nav" name="left"></router-view> <router-view class="fr_nav" name="right"></router-view>
頁面各部分引入路由:
import Hi1 from ‘@/components/Hi1‘
import Hi2 from ‘@/components/Hi2‘
配置路由:
routes: [ { path: ‘/‘, components: { default:Hello, left:Hi1, right:Hi2 } },{ path: ‘/Hi‘, components: { default:Hello, left:Hi2, right:Hi1 } } ]
‘/’根路徑,‘/Hi’路徑,components中,我們對三個區域定義了現實內容。
Hi1.vue頁:
<template> <div> <h4>{{ msg }}</h4> </div> </template> <script> export default { name: ‘hi1‘, data () { return { msg: ‘I am Hi1 page.‘ } } } </script>
Hi2.vue頁:
<template> <div> <h4>{{ msg }}</h4> </div> </template> <script> export default { name: ‘hi2‘, data () { return { msg: ‘I am Hi2 page.‘ } } } </script>
在App.vue中配置link:
<router-link to="/">首頁</router-link> | <router-link to="/hi">Hi頁面</router-link> |
vue-router url的參數傳遞
:冒號的形式傳遞參數:首先配置index.js路由
{ path:‘/params/:name/:cnblogs‘, component:Params }
新建Params組件,頁面中輸出name和cnblogs
<template> <div> <h2>{{ msg }}</h2> <p>網名:{{ $route.params.name}}</p> <p>博客:{{ $route.params.cnblogs}}</p> </div> </template> <script> export default { name: ‘params‘, data () { return { msg: ‘params page‘ } } } </script>
App.vue加入<router-link>標簽,利用url傳值。
<router-link to="/params/墨 眉/http://www.cnblogs.com/momei/">params</router-link> |
Vue-router learning01