Router

最新推荐文章于 2019-05-15 08:42:04 发布
最新推荐文章于 2019-05-15 08:42:04 发布
阅读量218 收藏
点赞数
分类专栏： vue 文章标签： router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44889992/article/details/90228830
版权

Router

基础

  1. vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？
  • hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
  • history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】
  • abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
  1. 路由的使用步骤
  2. 安装 vue-router yarn add vue-router -S
  3. 在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块
  4. 引入第三方的依赖包, 并注册路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use( VueRouter ) //使用vue-router这个第三方插件

注意： import这个关键字要放在整个文件的上层
4. 创建了一个router对象实例，并且创建路由表

const routes = [
   {
path: '/home',
component: Home
   }//每一个对象就是一个路由
  ]
const router = new VueRouter({
      routes//路由表 必写的
})
  1. 导出router实例
    export default router
  2. 入口文件main.js中引入路由实例 router , 然后在根实例中注册
import router from './router/index.js'
new Vue({
router,
render: (h) => App
}).$mount('#app')
  1. 给路由一个路由展示区域
  2. 如果是以及路由， 那么我们放在App组件中,用一个 router-view 的组件表示
<router-view />
  1. 当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上
const routes = [
{ //我们要求这个路由的配置要放在路由表的最上方
path: '/',
redirect: '/home'
}
]
  1. 业务： 错误路由匹配，
const routes = [
          {
       path: '/',
        redirect: '/home' //重定向
       },
   {
           path: '/home',
           component: Home
   },
{
        path: '/list',
        component: List
   },
{
        path: '/detail', 
        component: Detail   //注意component单词的拼写，没有s
   },
{
        path: '/login',
        component: Login
   },
{
    path: '/register',
    component: Register
    },
{
    path: '/user',
    component: User
   },
{
path: '/shopcar',
component: Shopcar
   },
{
path: '/error',
component: Error
   },
{ //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个
path: '**',
redirect: '/error'
   }
]
  1. vue路由模式的确定 mode
  2. 如果你使用的是 hash , 那么a标签就可以了、
  3. 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件
  • router-link 这个组件 身上必须要有一个 to 属性
  1. 二级路由
const routes = [
{
    path: '/shopcar',
    component: Shopcar,
    children: [
{
  path: 'yyb', //不写 /
  component: Yyb
       }
     ]
   }
]
  • 注意： 写好配置之后，不要忘记了， 在对应的一级路由的组件中书写 路由展示区域
  1. 命名路由

Router

基础

  1. vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？
  • hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
  • history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】
  • abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
  1. 路由的使用步骤
  2. 安装 vue-router yarn add vue-router -S
  3. 在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块
  4. 引入第三方的依赖包, 并注册路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use( VueRouter ) //使用vue-router这个第三方插件

注意： import这个关键字要放在整个文件的上层
4. 创建了一个router对象实例，并且创建路由表

const routes = [
   {
path: '/home',
component: Home
   }//每一个对象就是一个路由
  ]
const router = new VueRouter({
      routes//路由表 必写的
})
  1. 导出router实例
    export default router
  2. 入口文件main.js中引入路由实例 router , 然后在根实例中注册
import router from './router/index.js'
new Vue({
router,
render: (h) => App
}).$mount('#app')
  1. 给路由一个路由展示区域
  2. 如果是以及路由， 那么我们放在App组件中,用一个 router-view 的组件表示
<router-view />
  1. 当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上
const routes = [
{ //我们要求这个路由的配置要放在路由表的最上方
path: '/',
redirect: '/home'
}
]
  1. 业务： 错误路由匹配，
const routes = [
          {
       path: '/',
        redirect: '/home' //重定向
       },
   {
           path: '/home',
           component: Home
   },
{
        path: '/list',
        component: List
   },
{
        path: '/detail', 
        component: Detail   //注意component单词的拼写，没有s
   },
{
        path: '/login',
        component: Login
   },
{
    path: '/register',
    component: Register
    },
{
    path: '/user',
    component: User
   },
{
path: '/shopcar',
component: Shopcar
   },
{
path: '/error',
component: Error
   },
{ //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个
path: '**',
redirect: '/error'
   }
]
  1. vue路由模式的确定 mode
  2. 如果你使用的是 hash , 那么a标签就可以了、
  3. 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件
  • router-link 这个组件 身上必须要有一个 to 属性
  1. 二级路由
const routes = [
{
    path: '/shopcar',
    component: Shopcar,
    children: [
{
  path: 'yyb', //不写 /
  component: Yyb
       }
     ]
   }
]
  • 注意： 写好配置之后，不要忘记了， 在对应的一级路由的组件中书写 路由展示区域
  1. 命名路由

作用： 就是简写路径了

{
path: '/shopcar',
component: Shopcar,
//子路由
children: [
   {
    path: 'yyb', // 容易犯错点  没有/
    component: Yyb,
    name: 'yyb' //命名路由
   },
{
path: 'junge',
component: Junge
     }
  ]
},
  • 使用：
<router-link :to = "{name:'yyb'}"/>

注意：命名的话就不用写很多级，直接到

weixin_44889992
关注
专栏目录
Angular Router
03-26
Angular Router by Victor Savkin English | 20 Mar. 2017 | ASIN: B06X9N272Y | 118 Pages | AZW3 | 2.44 MB Key Features Written by the creator of the Angular router, giving you the best information ...
vue前后分离动态路由和权限管理方案
weixin_33767813的博客
12-26 621
需求 需要根据不同的角色来显示不同的菜单 问题 系统是前后分离模式开发的，出现了后端接口和前端路由都需要权限管理。 思路 后端的接口肯定得验证权限 在前端做好组件名和组件的映射 前端的路由通过后端发回的json动态生成，对于比较细粒度的可以通过css来控制和隐藏 方案 使用vue-router的router.addRoutes(routes)来动态生成路由。 注意事项 vue-router 是...
1-apicloud-video
weixin_44012573的博客
04-28 1399
HTML 标签 您的浏览器不支持 video 标签。 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 height pixels 设置视频播放器的高度。 loop loop 如果出现该属性，则当媒介文件完成播放后再次...
route
weixin_33868027的博客
10-27 186
route 添加/删除一条到192.168.3.0/24的路由，网关为192.168.1.254？route add/del -net 192.168.3.0 netmask 255.255.255.0 gw 192.168.1.254 ip route add （dev eth0）192.168.3.0/24 via 192.168.1.254 centos7 实测...
route和router的使用问题
cattleya_ada的博客
11-13 429
今天再学习动态路由大的时候爆了一个错，如图;   ,找度娘之后，最后发现是因为这里： 应该改为route才可以。解决问题的博主文章链接:https://blog.csdn.net/wangguoyu1996/article/details/80628135...
KUKA Router
07-11
TCP端口转发
RouterOs7.1.1的虚拟机文件
04-02
RouterOs7.1.1的虚拟机文件,有需要的请下载,内有详细的说明
react router
04-01
React Router 是一个强大的路由库，它是 React.js 生态系统中的重要组成部分，用于管理应用程序的页面导航和状态。在React应用中，路由管理是至关重要的，因为它允许用户在不刷新整个页面的情况下，通过URL来切换...
v-mode 双向数据绑定
weixin_44889992的博客
04-20 1700
v-mode 双向数据绑定 效果 数据改 ， 视图更 视图改， 数据更 实现 使用v-model实现 缺点 v-model默认绑定value属性， 所以v-model只能在表单使用 原理 为什么数据能直接在视图显示 v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候， 就会触发getter,watcher就会触发， watcher通知Vue生成新的VDOM树， 再通过ren...
vue的非响应式情况
weixin_44889992的博客
05-15 1144
vue的非响应式情况 数组的下标 <div id="app"> <button @click = "change"> 点击 </button> <ul> <li v-for = ' (item,index) in list ' :key = 'index'> <p&g...
列表渲染中的key的作用
weixin_44889992的博客
04-20 987
列表渲染中的key的作用 给VDOM添加标记 如果没有key会产生的问题： VDOM是惰性的， 它有一个原则， 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的， 删除了第二个之后， 第二个就变成了第一个， 它印象中第一个是红的， 所以就我们认为的第二个变成红的了 解决： 使用key属性 使用： <li v-for = " (item,index) in list " :key ...
vue--绑定类名
weixin_44889992的博客
04-18 815
class 为什么要绑定类名？ 数据–驱动–》视图 数据–控制–》类名 -->样式 类名 要和 数据 绑定 —使用 —》 v-bind 类名的绑定方式 A: 对象的形式 <div :class = "{'size': classFlag,'bg': classFlag}"></div> 注意： 对象中的key用字符表示 B: 数组的形式 <...
watch
weixin_44889992的博客
04-20 474
watch 作用： 用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发 使用 两种用法： key的value值是一个函数 new Vue({ watch: { key(value,oldvalue){} } }) 第一种用法的例子： <!DOCTYPE html> <html lang="en"> <head> &...
动态组件 is属性 keep-alive组件
weixin_44889992的博客
04-27 323
动态组件 动态组件就是 component组件 ， 组件身上可以绑定一个is属性， 用来表示某一个组件 is属性 我们html中有一些标签是规定它的直接子元素的 ， 比如 ul li ol li selector option table这类型标签 不能直接用常规的组件使用方式， 必须在对应直接子元素上绑定 is属性 <div id="app"> <table&g...
vue--Todolist（小项目）
weixin_44889992的博客
04-18 311
todolist ui库 sui 使用： 引入第三方库： cdn 业务： 开关的切换 点击编辑， 出现一个弹框， 当我们键盘回车的是将， 将input框中的内容展示在页面上 当任务已完成时， 点击 删除 按钮 直接删除 ， 当任务未完成时， 应该先出用户友好提示， 如果点击了确定， 在删除， 如果不点确定， 不能删除 底部按钮拥有不同的类名 底部按钮点谁 ， 谁激活 — 》 加一个button...
过滤器
weixin_44889992的博客
04-25 310
过滤器 vue 1.x版本一共提供了10个过滤器， 但是不满足人们使用，vue2.x全部不提供了， 交给开发者自己写 但是vue提供了定义过滤器的方式 过滤器： 对数据进行格式化的一个函数 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 过滤器用给一个 ’ | ’ 表示， 我们称之为 ‘管道符’ 过滤器-局部 <body> <div id="app...
封装自定义插件库
weixin_44889992的博客
04-27 305
封装自定义插件库 定义一个组件 就是一个单文件组件 Loading.vue 注册组件 import Loading from './components/Loading.vue' export const loading = { install () { Vue.component( 'Loading', Loading) } } 使用组件 import Loading from...
vue-深入响应式原理
weixin_44889992的博客
04-20 300
深入响应式原理： 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新 Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生 改变的时候， 就会触发， 然后watcher就会触发， 告诉视图（V）进行重新渲染 数据必须放在data选项中才能进行深入响应式 底层原理： 核心使用的是es5...
mixins
weixin_44889992的博客
04-20 296
概念： mixins； 混合 ,将 根实例或是组件中的配置项 抽离出来， 单独管理 类型 A：局部混入 var mixin = { methods: { sum(){ alert( 10*10 ) } }, } new Vue({ el: '#app', data: {}, watch: {}, mixins: [mixin], computed: {} }) 注意： 即使分离出去， 我们...
router ￥router
最新发布
09-03
router.￥router是一个对象,它是vue-router的核心。其中包含了几个API，包括router.addRoute、router.removeRoute、router.hasRoute和router.getRoutes。这些API都依赖于matcher实现。matcher是vue-router中的一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值