Vue.js学习与入门（八）Vue路由

不知道项目如何构建的请参照上一节，Vue.js学习与入门（七）Vue脚手架 https://blog.csdn.net/yimelancholy/article/details/102859239 中，本节以上一节中的vuedemo为例，给创建的vuedemo添加vue-router，输入如下命令：

npm install --save vue-router

在项目中创建cart.vue和list.vue两个vue文件

<!-- cart.vue -->
<template>
    <div id="cart">
        <h1>购物车页面</h1>
    </div>
</template>

<!-- list.vue -->
<template>
    <div id="list">
        <h1>商品列表页面</h1>
    </div>
</template>

在src/router目录下创建router.js文件，内容如下：

import cart from "../views/cart.vue";
import list from "../views/list.vue";
const routers=[
    {
        path:'/list',
        meta:{
            title:'商品列表'
        },
        component:list
    },{
        path:'/cart',
        meta:{
            title:'购物车'
        },
        component:cart
    }
];
export default routers;

在router.js文件中，首先引入cart.vue和list.vue两个组件，然后创建一个数组routers来指定路由匹配列表，每个路由映射一个组件。

在mian.js文件中，首先引入vue-router和src/router目录下的router.js文件，在加载vue-router插件，如下所示：

import Vue from 'vue'
import App from './App.vue'

//引入vue-router
import VueRouter from "vue-router";
//引入src/router目录下的router.js文件
import Routers from "./router/router";
//加载vue-router插件
Vue.use(VueRouter);

//路由配置
const RouterConfig = {
    //使用HTML5的History路由模式
    mode: 'history',
    routes: Routers
};
//定义路由组件
const router = new VueRouter(RouterConfig);

Vue.config.productionTip = false;

//在Vue的实例中引用这个路由组件
new Vue({
    el: '#app',
    router: router, //引用路由实例router
    render(h) {
        return h(App);
    }
});

在RouterConfig里，设置mode为history，使用HTML5的history路由模式，通过“/”设置路径。如果不配置，则使用“#”设置路径。设置routes为Routers就是之前引入的src/router目录下的router.js文件。以RouterConfig为参数，通过VueRouter来创建一个路由组件router。

vue-router提供的<router-link>，它会被渲染成一个<a>标签。在App.vue组件的模板中，添加两个<router-link>，用于购物车页面和商品列表页的链接，代码如下所示：

<template>
    <div id="app">
        <div id="routerPath">
            <ul>
                <li>
                    <!-- 这个路径要与router.js中component为cart的path要一致 -->
                    <router-link to="/cart">购物车</router-link>
                </li>
                <li>
                    <!-- 这个路径要与router.js中component为list的path要一致 -->
                    <router-link to="/list">商品列表</router-link>
                </li>
            </ul>
        </div>
        <div id="routerView">
            <!-- 用于显示跳转页面 -->
            <router-view></router-view>
        </div>
    </div>
</template>

注意<router-link>中的to属性的值要用之前router.js中所对应的component的path要一致，<router-view>用于渲染跳转的页面，可以使用css来控制渲染时在页面中的位置。

最后在这个项目的目录下，使用命令端口输入命令，启动服务：

npm run dev

之后在浏览器输入地址http://localhost:8080/vuedemo，即可运行项目。