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. nginx 默认配置语法和日志的format

    nginx 默认配置 查看有nginx哪些默认配置文件,打开/etc/nginx/nginx.conf文件,查看尾行部分 会默认将/etc/nginx/conf.d/文件下其他以.conf结尾的配置文 ...

  2. TLS1.3 握手协议的分析

    1.LTS支持的三种基本的密码交换模式 (EC)DHE (Diffie-Hellman both the finte field and ellptic curve varieties) PSK-on ...

  3. awk初级教程

    参考:sed & awk 概述 sed & awk指令组成 与sed区别 尽管awk指令与sed指令的结构相同,都由模式和过程两部分组成,但过程本身有很大不同. awk看上去不像编辑器 ...

  4. 系统API是原子操作吗？

    系统API里面也会有简单的指令,类似于a++这种,我们认为的简单指令对应到汇编可能很多条.执行在其中某一条汇编的时候可能就切换进程了.切换进程可能发生在用户态(虚拟内存的用户空间),也可能发生在内核态 ...

  5. 【kernel】Centos 云上升级内核失败 如何处理【笔记记录转】

    Centos7选定默认启动的内核版本 vim /etc/grub2.cfg   修改timeout =5   修改成30天 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附 ...

  6. centos7 修改内核文件 网卡名称为标准名称eth0

    在开机安装系统之前按TAB键后输入标记信息后安装系统就可以变成标准网卡接口eth0 或eth1

  7. SQL 学习指南-数据库使用

    1.缺失子句 now() 是MySQL的内建函数,返回当前的日期和时间.在MySQL中可以直接使用下列语句查询: SELECT NOW(); 但是某些数据库规定查询语句必须包含 from 子句,并在其 ...

  8. Vue动态创建注册component的实例代码

    https://segmentfault.com/a/1190000015698278

  9. HTML 008 head

    HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题使用 <title> 标签定义HTML文档的标题 <base> - 定 ...

  10. 变形和透视 perspective

    前面介绍了css3 2D变形(transform)移动.缩放.旋转.倾斜 有2D 也有3D,例如3D transform中有下面这三个方法: rotateX( angle ) rotateY( ang ...