vue的路由的用法（router）

　　博主這幾作一個vue的小項目常常用地路由，講講我的的淺薄的見解與使用：

　　vue路由作跳轉：（博主是用vue-cli腳手架新建的項目，這裏就不談了）

　　假設是從home.vue跳到newslist.vue

1.首先初始的頁面ihome.vue
而後作好要跳轉的頁面newslist。vue
再在路由的js文件下引入組件

import Home from '相對於當前路徑';
import NewsList from '相對於當前路徑'；

 

2.import Vue from 'vue';

引入路由對象：

import Router from 'vue-router';

安裝路由插件
Vue.use(Router);

 

3.再在你的Router規則寫完善
export default new Router({
routes: [
{ path: '/', redirect: { name: 'home' } }, //重定向（當地址欄爲端口號/時，跳轉到名字爲home名路由，即初始化爲home）

{
name: 'home', //用於路由跳轉的名字
path: '/home', //到時候地址欄會顯示的路徑
component: Home //引入組件
},

{ name: 'newslist', path: '/newslist', component: NewsList }, //跳轉的頁面
]
})

 

 

4.由於博主的路由js與main.js不是一塊兒的，因此須要在main.js引進全局去

import router from '路徑'
router加入new Vue裏去，

5.這個路由在home.vue裏的寫法

建議替換某個a標籤，起到跳轉的做用，就點擊這個標籤便可去跳轉
<router-link :to="{name:'newslist'}">
內容
</router-link>

 

6.最後別忘了在初始的app,vue里加上

<!-- 中間內容變化，即組件引用變化 -->
<router-view></router-view>

補充，並且路由裏能夠傳參，能夠用query或者params,其用法：

即params/query:{變量名：變量}

在路由的另外一端接收：

在created函數裏，用變量接收：變量=this.$route.query/params.變量名；

即這個變量就能夠用了

不用通常來講用params傳參，由於query會默認在地址欄上顯示傳參了什麼，方便看

而params要看的話，要在Router規則的path上末尾加上：變量名

由於query會默認在地址欄末尾加上？變量名