Vue 路由 Vue-Router

Posted wjw1014

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 路由 Vue-Router相关的知识,希望对你有一定的参考价值。

Vue 路由 Vue-Router

什么是路由

Vue Router 是 Vue 官方提供的路由管理器,他和 Vue 的核心深度集成,让构建单页面应用变得非常简单,通过根据不同的请求路径,切换显示不同组件进行渲染页面。

基本路由使用

安装路由

注意:使用路由首先要安装模块

npm install vue-router

引入 vue-router.js

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由</title>
</head>

<body>


    <div id="app">
        <div class="header">
            <h1>头部</h1>
        </div>
        <div class="left">
            <p>
            <ul>
                <li><a href="#/foo">go foo</a></li>
                <li><a href="#/bar">do bar</a></li>

                <!-- 官方推荐
                通过 router-link 标签默认会渲染出来 a 标签
                其中通过 to 属性来指定跳转的链接, 不用带上#号 -->
                <li>
                    <router-link to="/foo">go foo</router-link>
                </li>
                <li>
                    <router-link to="/bar">do bar</router-link>
                </li>
            </ul>
            </p>
        </div>
        <div class="main">
            主页面
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>

    <script>

        // 1. 定义组件
        const Foo = {
            template: ‘<div> 我是 Foo 组件 </div>‘
        }
        const Bar = {
            template: ‘<div> 我是 Bar 组件 </div>‘
        }

        // 2. 配置路由表:当点击指定的url的时候,显示对应的组件
        const router = new VueRouter({
            routes: [
                { path: ‘/foo‘, component: Foo },
                { path: ‘/bar‘, component: Bar }
            ]
        })


        new Vue({
            el: ‘#app‘,
            data: {

            },
            router  // router:router
        })
    </script>

</body>

</html>

技术图片

以上是关于Vue 路由 Vue-Router的主要内容,如果未能解决你的问题,请参考以下文章

vue路由对象($route)参数简介

vue-router 2.0 常用基础知识点之router-link

Vue-router路由基础总结

Vue-Router的使用详解

vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: {

vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: {