Vue路由使用

最新推荐文章于 2019-10-12 07:02:47 发布
最新推荐文章于 2019-10-12 07:02:47 发布
阅读量134 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lql_h/article/details/102513403
版权

概述

路由是以插件的形式引入到我们的vue项目中来的

vue-router是vue的核心插件

1:创建路由对象 `var router = new VueRouter();

2:配置路由规则 `router.addRoutes([路由对象]);

路由对象`{path:'锚点值',component:要(填坑)显示的组件}`

3:将配置好的路由对象交给Vue

    - ##### 在options中传递-> key叫做 router

4:留坑(使用组件) `<router-view></router-view>`

代码


       var Login={

           template:`

              <div>我是登录页面</div>

           `,

       }

       //安装路由插件

       Vue.use(VueRouter);

       //创建路由对象

      var router= new VueRouter({

         //配置路由对象

         routes:[

            {path:'/login',name:'login',component:Login}

         ]

      })

       new Vue({

           el:'#app',

           router,

           template:`

              <div>

                  <p>请在链接上加上login测试路由功能</p>

                  <router-view></router-view>

              </div>

           `,

           data(){

              return {}

           },

       })
<!DOCTYPE html>

<html>

<head>

    <title>路由的安装和使用</title>

</head>

<body>

    <div id="app">

      

    </div>



    <script type="text/javascript" src="vue.js"></script>

    <!-- 引入路由插件 -->

    <script type="text/javascript" src="vue-router.js"></script>

    <script type="text/javascript">

       var Login={

           template:`

              <div>我是登录页面</div>

           `,

       }

       //安装路由插件

       Vue.use(VueRouter);

       //创建路由对象

       var router= new VueRouter({

           //配置路由对象

           routes:[

              {path:'/login',name:'login',component:Login}

           ]

       })

       new Vue({

           el:'#app',

           router,

           template:`

              <div>

                  <p>请在链接上加上login测试路由功能</p>

                  <router-view></router-view>

              </div>

           `,

           data(){

              return {}

           },

       })

    </script>

</body>

</html>

 

运行效果

 

lql_h
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue路由入门使用
01-08
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡...
vue路由的创建及基本使用
04-15
以上就是Vue Router的基础用法，包括路由的创建、动态路由与查询参数的传递、导航守卫、元信息以及动画和组件模板的使用。通过掌握这些知识，你可以构建出具有强大导航功能的Vue应用。在实际项目中，还可以根据需求...
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
Vue路由跳转原理（哈希模式）
lql_h的博客
10-12 3036
概述 哈希模式（利用`hashchange` 事件监听 url的hash 的改变） ``` window.addEventListener('hashchange', function(e) { console.log(e) }) ``` 核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面...
VUE购物车与我的页面实现
lql_h的博客
09-27 2211
store.js let store=new Vuex.Store({ state: { token:'', cartarry:JSON.parse(localStorage.getItem('cartarry')) || [],//存储购物车商品的数组 }, mutations: { //设置vuex的token settoken(...
VUE首页与分类页的实现
lql_h的博客
09-26 2145
router.js { path: '/botnav', name: 'botnav', component: () => import('./views/Botnav.vue'), children:[ { path: 'index', name: 'index', co...
VUE的slot插槽和ref、$parent
lql_h的博客
10-11 1719
概述 - #### slot插槽 - #### slot就是子组件里给DOM留下的坑位 - #### <子组件>DOM</子组件> - #### slot是动态的DOM - #### ref获取子组件实例 - #### 识别：在子组件或元素上使用属性ref="xxxx" - #### 获取：this.$r...
VUE数据监听watch计算属性computed
lql_h的博客
10-11 608
思考业务场景： 1. 类似淘宝，当我输入某个人名字时，我想触发某个效果 2. 利用vue做一个简单的计算器 概述 watch监听单个，computed监听多个 当watch监听的是复杂数据类型(数组，对象)的时候需要做深度监听（写法如下） watch:{ msg:{ … }, ...
VUE登录页面的开发
lql_h的博客
09-25 379
Chrome手机版调试 组件使用官方网站 https://didi.github.io/cube-ui/#/zh-CN/docs/introduction axios的安装 ##官方文档：http://www.axios-js.com/docs/index.html npm install axios App.vue <...
VUE的引包留坑实例化、插值表达式{{}}
lql_h的博客
10-11 315
代码 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- 留坑 --> <div id="app"></div> <!-- 引包 --> <script type="...
Vue路由的传参与取参
lql_h的博客
10-12 303
概述 1. 查询参数 配置（传参） :to="{name:'login',query:{id:loginid}}" 获取（取参） this.$route.query.id 2.路由参数 配置（传参） :to="{name:'register',params:{id:registerid} }" 配置路由的规则 { name:'detail',path:'/det...
VUE常用指令v-xxx
lql_h的博客
10-11 293
概述 在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。 譬如在HTML页面中这样使用`<div v-xxx=''></div>` 在vue中v-xxx就是vue的指令 指令就是以数据去驱动DOM行为的,简化DOM操作 常用指令 - v-text 不可解析html标签 - v-html 可解析html标签 - v-if 做元...
Vue环境搭建
lql_h的博客
09-24 234
node环境 node是傻瓜式安装的，直接去官网下载安装不断下一步 命令行输入node -v查询版本号，有版本号即安装成功 C:\Users\Administrator\lql3.x>node -v v8.9.3 node自带npm包管理工具（安装好node也可以输入npm -v查看版本号） C:\Users\Administrator\lql3.x>npm -v 5...
VUE单双向数据流及事件绑定
lql_h的博客
10-11 197
概述 #vue单向数据流绑定属性值 v-bind: (属性)，简写:(属性) 例子：`<input v-bind:value="name" v-bind:class="name">` - 单向数据绑定 内存改变影响页面改变 - v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染 vue双向数据流 v-model ，只作用于有value属性的元...
Vue路由的跳转
lql_h的博客
10-12 177
概述 路由的跳转方式有： 1.通过标签：`<router-link to='/login'></router-link>` 2.通过js控制跳转`this.$router.push({path:'/login'})` 区别： this.$router.push() 跳转到指定的url，会向history插入新记录 this.$router.replace() ...
VUE打包APP
lql_h的博客
09-29 139
Vue-cli3打包后出现空白页面的解决 ## vue.config.js module.exports = { publicPath: './', assetsDir: 'static', outputDir: 'dist', …… ##router.js // mode: 'history', Hbuilder打包APP ...
VUE组件化开发
lql_h的博客
10-11 136
概述 创建组件的两种方式 var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }//局部声明 Vue.component('组件名',组件对象);//全局注册 等于注册加声明了 组件类型 - 通用组件（例如表单、弹窗、布局类等) - 业务组件（抽奖、机器分类） ...
vue 路由使用实例
最新发布
06-13
以下是一个简单的 Vue 路由使用实例： 1. 安装 Vue Router ``` npm install vue-router ``` 2. 在 main.js 文件中引入 Vue Router 并注册 ``` import Vue from 'vue' import VueRouter from 'vue-router' Vue....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值