5.vue路由

路由能夠讓其餘組件掛在到根組件上。

vue路由配置：

1.安裝

cnpm install vue-router  --save

2.在main.js引入並實例化

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3.建立組件並在main.js 配置路由

• 引入組件

import Home from './components/Home.vue';
import News from './components/News.vue';

• 定義路由

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect: '/home' }   /*默認跳轉路由*/
];

• 實例化VueRouter

const router = new VueRouter({
  routes // （縮寫）至關於 routes: routes
})

• 掛載

new Vue({
    el: '#app',
    router，
    render: h => h(App)
})

4.根組件的模板裏面放上這句話

<router-view></router-view>

5.根組件的模板路由跳轉

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

示例：

建立Home組件、News組件。
在main.js中配置

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

Vue.use(VueRouter);

Vue.config.productionTip = false;

import Home from "./components/Home";
import News from "./components/News";

const routes = [
    {path: "/home", component: Home},
    {path: "/news", component: News},
    {path: "*", redirect: "/home"},
];
const router = new VueRouter({
    routes//是routes:routes 的簡寫
});


new Vue({
    router,
    render: h => h(App),
}).$mount('#app');

App.vue

<template>
    <div id="app">
        <router-link to="/home">首頁</router-link>
        <router-link to="/news">新聞</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'App',
        components: {},
        data() {
            return {}
        }
    }
</script>

動態路由與 get 傳值

1.動態路由

this.$route.params /獲取動態路由傳值/

News.vue

<template>
    <div id="news">
        <p>新聞頁</p>
        <ul>
            <li v-for="(item,key)  in list" :key="item">
                <router-link :to="'/news-content/'+key">{{key}}---{{item}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "News",
        data() {
            return {
                msg: "這是新聞組件",
                list: ["新聞1", "新聞2", "新聞3"],
            }
        }
    }
</script>

NewsContent.vue

<template>
    <div id="newContent">
        <p>這是新聞內容</p>
        <p>id 爲:{{newsId}}</p>
    </div>
</template>

<script>
    export default {
        name: "NewsContent",
        data() {
            return {
                newsId: ""
            }
        },
        methods: {},
        mounted() {
            this.newsId = this.$route.params.newsId;
        },
    }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

Vue.use(VueRouter);

Vue.config.productionTip = false;

import News from "./components/News";
import NewsContent from "./components/NewsContent";

const routes = [
    {path: "/news", component: News},
    {path: "/news-content/:newsId", component: NewsContent},
    {path: "*", redirect: "/home"},
];
const router = new VueRouter({
    routes
});


new Vue({
    router,
    render: h => h(App),
}).$mount('#app');

2. get傳值

this.$route.query //獲取get傳值
示例：

Home.vue

<template>
    <div id="home">
        <p>首頁</p>
        <ul>
            <li v-for="(item,key) in list" :key="item">
                <router-link :to="'/home-content?homeId='+key">{{item}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                msg: "這是首頁",
                list: ["首頁1", "首頁2", "首頁3"]
            }
        }
    }
</script>

HomeContent.vue

<template>
    <div id="homeContent">
        <p>首頁內容id爲：{{homeId}}</p>
    </div>
</template>

<script>
    export default {
        name: "HomeContent",
        data() {
            return {
                homeId: ""
            }
        },
        mounted() {
            this.homeId = this.$route.query.homeId;
        }
    }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

Vue.use(VueRouter);

Vue.config.productionTip = false;

import Home from "./components/Home";
import HomeContent from "./components/HomeContent";

const routes = [
    {path: "/home", component: Home},
    {path: "/home-content", component: HomeContent},
    {path: "*", redirect: "/home"},
];
const router = new VueRouter({
    routes
});


new Vue({
    router,
    render: h => h(App),
}).$mount('#app');

示例：vuedemo路由結合請求數據

News.vue

<template>
    <div id="news">
        <p>新聞頁</p>
        <ul class="newList">
            <li v-for="(item,key)  in list" :key="key">
                <router-link :to="'/news-content/'+item.aid">{{item.title}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "News",
        data() {
            return {
                msg: "這是新聞組件",
                list: [],
            }
        },
        methods: {
            getNewsList() {
                let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                this.$http.get(api).then((res) => {
                    this.list = res.body.result;
                })
            }
        },
        mounted() {
            this.getNewsList();
        }
    }
</script>

<style scoped>
    .newList li {
        height: 3.4rem;
        line-height: 3.4rem;
        font-size: 1.5rem;
    }
    .newList li a{
        color: #2c3e50;
    }
</style>

NewsContent.vue

<template>
    <div id="newContent">
        <h2>{{list.title}}</h2>
        <div v-html="list.content"></div>
    </div>
</template>

<script>
    export default {
        name: "NewsContent",
        data() {
            return {
                newsId: "",
                list: []
            }
        },
        methods: {
            getNewsContent: function (newsId) {
                let api = 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=' + newsId;
                this.$http.get(api).then((res) => {
                    this.list = res.body.result[0];
                })
            }
        },
        mounted() {
            this.newsId = this.$route.params.newsId;
            this.getNewsContent(this.newsId);
        },
    }
</script>

<style scoped>

</style>

Vue路由編程式導航以及hash模式

編程式導航：

經過JavaScript來實現路由跳轉。有兩種方式能夠實現。

例子：想經過首頁按鈕跳轉到新聞頁
Home.vue

<template>
    <div id="home">
        <p>首頁</p>
        <button @click="linkNews">點擊跳轉新聞頁</button>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                msg: "這是首頁",
            }
        },
        methods: {
            linkNews: function () {
                //方法一：{path: "/news", component: News}
                this.$router.push({path: 'news'});//推薦
                //方法二：須要在main.js中routes裏改成{path: "/news", component: News,name:"newsShow"},
                //this.$router.push({name:'newsShow'});
            }
        }
    }
</script>

hash模式：

像這種http://localhost:8080/#/news，路由中含有#。要想改成history模式（即不含#）在main.js中 增長：mode: 'history'。但history可能會出問題，須要配合後臺進行設置。

const router = new VueRouter({
  mode: 'history',   /*hash模式改成history*/
  routes // （縮寫）至關於 routes: routes
})

路由的嵌套

舉例：
--首頁
--新聞
--用戶（User.vue）
-----用戶列表（UserList.vue）
-----增長用戶（UserAdd.vue）
1.配置路由（main.js中）

{
    path: '/user',
    component: User,
    children:[
        { path: 'useradd', component: UserAdd },
        { path: 'userlist', component: Userlist }
    ]
}

2.父路由裏面配置子路由顯示的地方

<router-view></router-view>

User.vue

<template>
    <div id="user">
        <div class="userLift">
            <ul>
                <li><router-link to="/user/userList">用戶列表</router-link></li>
                <li><router-link to="/user/userAdd">增長用戶</router-link></li>
            </ul>
        </div>
        <div class="userRight">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "User"
    }
</script>

<style scoped>
    #user{
        padding-left: 5px;
        display: flex;
    }
    .userLift {
        width: 200px;
        min-height:400px;
    }
    .userLift li{
        height: 40px;
        line-height: 40px;
        border-right: 2px solid #2c3e50;
    }
    .userLift li a{
        color: aquamarine;
    }
    .userRight {
        flex: 1;
    }
</style>

UserList.vue

<template>
    <div id="userList">
        這是用戶列表
    </div>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

UserAdd.vue

<template>
    <div id="userAdd">
        這是增長用戶
    </div>
</template>

<script>
    export default {
        name: "UserAdd"
    }
</script>

<style scoped>
</style>

mian.js 注意子路由path不能加」/「

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import VueResource from "vue-resource";

Vue.use(VueRouter);
Vue.use(VueResource);
import './assets/css/basic.scss';

Vue.config.productionTip = false;

import Home from "./components/Home";
import News from "./components/News";
import User from "./components/User";
import NewsContent from "./components/NewsContent";
import HomeContent from "./components/HomeContent";
import UserList from "./components/User/UserList";
import UserAdd from "./components/User/UserAdd";

const routes = [
    {path: "/home", component: Home},
    {path: "/news", component: News,name:"newsShow"},
    {path: "/news-content/:newsId", component: NewsContent},
    {path: "/home-content", component: HomeContent},
    {path:"/user",component:User,children:[
            {path:'userAdd',component:UserAdd},
            {path: 'userList',component: UserList}
        ]},
    {path: "*", redirect: "/home"},
];
const router = new VueRouter({
    routes
});


new Vue({
    router,
    render: h => h(App),
}).$mount('#app');

路由模塊化

將路由邏輯從main.js中封裝成模塊。
router----->>router.js

import Vue from 'vue'
//配置路由
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import Home from "../components/Home";
import News from "../components/News";
import User from "../components/User";
import Picture from "../components/Picture";
import NewsContent from "../components/NewsContent";
import HomeContent from "../components/HomeContent";
import UserList from "../components/User/UserList";
import UserAdd from "../components/User/UserAdd";

const routes = [
    {path: "/home", component: Home},
    {path: "/news", component: News, name: "newsShow"},
    {path: "/picture", component: Picture},
    {path: "/news-content/:newsId", component: NewsContent},
    {path: "/home-content", component: HomeContent},
    {
        path: "/user", component: User, children: [
            {path: 'userAdd', component: UserAdd},
            {path: 'userList', component: UserList}
        ]
    },
    {path: "*", redirect: "/home"},
];
//實例化VueRouter
const router = new VueRouter({
    routes
});
export default router;

在main.js引入模塊

import router from './router/router'