1.项目
  注意：项目在初始化的时候没有安装vue-router就需要进行安装

2.安装路由：

在项目中使用ctrl+`, 打开终端, 执行如下命令

npm i vue-router -S

或者

cnpm install vue-router --save

在一个模块化工程中使用
1.在main.js中必须要通过 Vue.use() 明确地安装路由功能：

 import Vue from 'vue'

  import VueRouter from 'vue-router'

  Vue.use(VueRouter)

2.main.js创建路由

const router = new VueRouter({

    routes:[

      {

        path:"/",

        name:"HelloWorld",

        component:HelloWorld

      }

    ]

  })

3.需要显示路由的位置
  <router-view />

4.注入路由对象，在main.js中Vue实例中

new Vue({

  　　el: '#app',

  　　router,

  　　components: { App },

  　　template: '<App/>'

})

在单页面里使用路由

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

    <!--00- 引入vue-router.js -->

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

    <style>

        .top {

            background-color: orange;

            height: 80px;

        }

        .container {

            display: flex;

        }

        .left {

            flex: 2;

            background-color: lightgreen;

            height: 500px;

        }

        .main {

            flex: 8;

            background-color: lightpink;

            height: 500px;

        }

    </style>

</head>

<body>

    <div id="app">

        <div class="top">头部</div>

        <div class="container">

            <div class="left">

                <!-- 01-router-link相当于链接 -->

                <li>

                    <router-link to="/goods">我是goods</router-link>

                </li>

                <li>

                    <router-link to="/user">我是user</router-link>

                </li>

            </div>

            <div class="main">

                <!-- 01-router-view相当于占位 -->

                <router-view></router-view>

            </div>

        </div>

    </div>

    <script>

        // 02-创建两个组件

        const goods = {

            template: '<h3>goods内容</h3>'

        }

        const user = {

            template: '<h3>user内容</h3>'

        }

        // 02-创建路由对象

        // 在router对象中主要包含route路由规则,

        // 一条路由规则一般由3部分组件

        // - path: URL地址

        // - name: 别名( 可以不写)

        // - component: 对应的组件, 一个对象(组件参数)

        const router = new VueRouter({

            // routes是路由规则, 是一个数组每个元素都是一条具体的路由规则(route), 使得路由和组件绑定.

            // 当URL匹配到路由规则时, 使用对应的组件替换<router-view>中的内容

            routes: [

                { path: '/goods', component: goods },

                { path: '/user', component: user }

            ]

        })

        const vm = new Vue({

            el: '#app',

            data() {

                return {

                }

            },

            methods: {},

            router: router, //03-把router挂载到Vue中 可省略为router

            components: { //03-组件挂载

                goods: goods,

                user: user

            }

        });

    </script>

</body>

</html>

效果

小结

  1. 引入vue-router.js

  2. 创建router对象(路由规则)

    1. path

    2. component

    3. 创建组件

    4. 挂载组件

  3. 挂载router对象到vue实例中

Vue学习手记02 - 路由的更多相关文章

  1. vue学习记录④（路由传参）

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

  2. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  3. Vue学习(三)-Vue-router路由的简单使用

    一.Vue-Router环境的安装: 如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可, 二.路由学习 1.路由的配置    vue-cli项目自 ...

  4. Vue学习手记03-路由跳转与路由嵌套

    1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...

  5. Vue学习手记01-安装和项目创建

    1.安装Vue  注:node版本必须大于等于8.9  vue-cli3.x:npm install -g @vue/cli  vue-cli2.x:npm install -g @vue/cli-i ...

  6. vue学习记录③（路由）

    上篇文章我们用vue-cli脚手架工具做了个简单的hello world页面,但是我们破坏了原来的流程,而正常的访问页面应该是通过路由来实现的. 那么什么是路由呢? 路由就是通过不同的url来访问不同 ...

  7. Vue学习手记09-mock与axios拦截的使用

    01.安装 安装mock npm install mockjs 安装axios npm install axios 02.新建一个config.js文件做axios拦截 import axios fr ...

  8. Vue学习手记08-vue-cli的启动过程

    分两种情况---无路由和有路由 无路由 看到启动页面 在文件main.js( vue项目的入口文件)中 这里可以看到,生成了一个全局的vue实例,绑定在了#app上面,也就是在文件index.html ...

  9. vue学习-day04（路由）

    目录: 1.组件传值-父组件向子组件传值和data与props的区别    2.组件传值-子组件通过事件调用向父组件传值          3.案例:发表评论.使用ref获取DOM元素和组件引用   ...

随机推荐

  1. PHP原生EXCEL导出带样式无插件无乱码实现

    PHP原生EXCEL导出 经测试 带样式 无插件 无乱码,不需要引入任何插件,不需要修改任何编码 (使用时只需要修改引入php数据库配置文件.修改thead tbody中的数据即可.根据自己的需要去接 ...

  2. iOS开发-NSArray

    忙了一上午,解决了几个bug,现在终于抽出来一点时间喝点水休息下, 想着系列这么浩大的一个工程,才刚刚开始写,不能断了,就跟写小说一样,既然是系列,那么就需要不停更... 好吧. 简单的说说iOS开发 ...

  3. S5PV210 启动流程

    S3C6410启动流程 首先,看一下S3C6410启动流程 ① iROM supports initial boot up : initialize system clock, D-TCM, devi ...

  4. coco creator编辑动画坑之拖图片

    如图所示,批量选中多张图片之后,拖到右下角的框中,发现有时候可以有时候不行.这个我觉得是个软件的bug 后来经过测试发现只有在粉红色圈的高度才可以正确放入图片,否则都放不了.

  5. laravel模型关联评论

    用户模型 public function show(Post $post,LogManager $log){ $post->load("comments"); //这种方式是 ...

  6. 【Java】接口和抽象类总结

    一.接口 1.1 成员变量(其实是常量) 1.2 方法 二.抽象类 2.1 成员变量 2.2 方法 一.接口 1.1 成员变量(其实是常量) 成员变量默认用 public static final修饰 ...

  7. pandas 25 式

    英文版 Jupyter Notebook 链接:https://nbviewer.jupyter.org/github/justmarkham/pandas-videos/blob/master/to ...

  8. c# 定义和调用索引器

  9. DNS服务——服务端 和 客户端 配置

    参考:Linux下DNS主从服务器搭建详解 前言 电脑经常会出现一些网络小毛病.有的时候,QQ能正常上网,但是网页却打不开.这种时候十有八九是DNS出问题了. QQ在DNS不可用的时候,可以跳过DNS ...

  10. Educational Codeforces Round 72 (Rated for Div. 2)-D. Coloring Edges-拓扑排序

    Educational Codeforces Round 72 (Rated for Div. 2)-D. Coloring Edges-拓扑排序 [Problem Description] ​ 给你 ...