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. MACOS 安装mysqlclient 的 Library not loaded错误

    报错场景 >>> import MySQLdb Traceback (most recent call last): File "<stdin>", ...

  2. python 中 ModuleNotFoundError: No module named 'Crypto' 错误处理

    今天在微信小程序服务端集成了微信的登录解密模块 WXBizDataCrypt,集成后运行程序时出现了下面的错误 (.venv) [1lin24@1lin24]# python manager_dev. ...

  3. 使用ISO文件制作openstack使用的coreOS镜像

    OpenStack源码交流群: 538850354 本篇文章是使用coreOS ISO文件手动制作openstack使用的qcow2镜像文件,关于coreOS的介绍,可以看这里 使用服务器:cento ...

  4. Windows——Office使用激活工具激活后仍提示激活

    问题: Office使用激活工具激活后仍提示激活 分析: 造成该问题的原因通常是未删除操作系统预置Office导致的, 解决方案: 调出运行,输入regedit打开注册表编辑器, 依次打开   HKE ...

  5. 凤凰新闻APP的增长黑客流程步骤经验：3.5星|《我不是产品经理》

    “ 我问了他三个问题.●你是AI科学家或者算法工程师吗?答:不是.●你想天天坐在电脑旁点鼠标或者打电话吗?答:不想.●你愿意每天盯着数据仪表盘定策略并与生产者做运营沟通吗?答:不愿意.我回答他:你别去 ...

  6. Jenkins构建自动化--实例一

    1.新建任务 2.配置任务 3.构建任务 5.构建完成后,可以点击任务名称查看结果

  7. vue npm，Git随笔

    下载模块: npm install <package-name>  --save-dev 上线: npm run build 基本使用流程:1. npm install vue-cli - ...

  8. 是什么是FBC CBV

    - FBV url   -   函数 - CBV url   -   view

  9. Accounts Merge

    Description Given a list accounts, each element accounts[i] is a list of strings, where the first el ...

  10. 59、servlet3.0-异步请求

    59.servlet3.0-异步请求 59.1 开启servlet异步请求步骤 支持异步处理 asyncSupported=true 开启异步模式 req.startAsync(); 业务逻辑进行异步 ...