———————————-(VUE柒)————————————-

路由=>day8_15

一、回顾与技术栈梳理

1.node-路由

  1. 指向当前应用的某个具体资源的路径

2.express

  1. 两层路由
  1. app.js 具体的某个router文件

  1. sequelize orm的框架

    持久层 特别容易特别方便

    model 创建是手动的

    sequelize-auto 快捷工具 model全自动生成

    1.  持久层只剩下调用api

  2. 升级pxpress成koa2

    ctx

    单层路由,允许在单层路由里定义多级路由

    5.一阶段a标签定位到页面的某个位置

    Bootstrap

二、前端路由的概念

  1. vue 当作是页面显示的工具

  1. 锚点

    xxxx —>称为hash值

  2. 服务端的路由

    定位服务端的唯一的资源

  3. 前端的路由

    页面并没有跳转也不会刷新.知识基于url+#hash

    1.  定位到页面上的唯一的一个资源
    3.  ==>vue里头其实就是定位到某个具体的组件
    5.  ==>vue-router

(3.1) hash值不一样,只会定义到页面上某个具体的内容(a标签)

(3.2) 大前提: vue环境下,hash值变了,会让某个具体的组件显示出来,而且

  1.     同时会隐藏掉当前的组件

三、vue中router与router与route区别

1.$route对象

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

1.$route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如”/foo/bar”。

2.$route.params** 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。

3.7_(柒)_路由=day8_15 - 图1route.query.user == 1， 如果没有查询参数，则是个空对象。

4.$route.hash* 当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串。锚点

5.$route.fullPath** 完成解析后的 URL，包含查询参数和hash的完整路径。

6.$route.matched** 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

7.$route.name 当前路径名字

8.$route.meta 路由元信息

```

route object 出现在多个地方:

组件内的 this.route和route和route watcher 回调（监测变化处理）;

router.match(location) 的返回值

scrollBehavior 方法的参数

导航钩子的参数：

router.beforeEach((to,from, next)=>{//to 和from都是 路由信息对象,后面使用路由的钩子函数就容易理解了})

7_(柒)_路由=day8_15 - 图2

2.$router对象

$router对象是全局路由的实例，是router构造方法的实例。

(2.1)push
  1. 1.字符串this.$router.push('home')
  3. \2. 对象this.$router.push({path:'home'})
  5. \3. 命名的路由this.$router.push({name:'user',params:{userId:123}})
  7. 4.带查询参数，变成 /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})
  9. push方法其实和<router-link :to="...">是等同的。
  10. 注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

(2.2)go
  1.  页面路由跳转 
  2. 前进或者后退this.$router.go(-1) // 后退

(2.3)replace
  1. push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
  2. 不会向 history 栈添加一个新的记录
  3. // 一般使用replace来做404页面
  4. this.$router.replace('/')
  5. 配置路由时path有时候会加 '/' 有时候不加,以'/'开头的会被当作根路径，就不会一直嵌套之前的路径。

7_(柒)_路由=day8_15 - 图3

3.区别

$router

$router是去全局的一个路由实例(全局变量),

  1. this.$router.push({path: '/login'}); // 路由跳转, 向 history 中增加一条记录
  2. this.$router.go(-1); // 路由前进(正数)或者后退(负数), 0刷新当前页面
  3. this.$router.replace({path: '/login'}); // 在 history记录中替换当前路径, 不记录.

$route

$router是一个跳转的路由对象(局部变量), 每一个路由都有自己的route, route中记录了当前路由的跳转的name, path, params, query;
获取的时候, this.$route.path, this.$route.query$router

四、路由(vue-router)使用

(4.1)引包并使用
  1.  引包 import VueRouter from '../lib/vue-router-3.0.1' 
  2.  Vue.use(VueRouter)

(4.2)配置routes
  1. path 2.component 3.redirect 4.挂载路由 5.创建组件占位符(html) router-view
  2. 代码示例见后面

五、router-link的使用

  1. 默认会被渲染成a标签的锚点形式:可以更改路由-hash

可以通过指定tag属性,更改router-link渲染城的标签的格式

此时router-link可以更改hash,是基于编程式导航(js)

2.编程式导航:

  1.  是比router-link更常用的一种改变路由地址的方式

  1. $router 路由对象

  2. 前进 forward(n) 2.后退 back(n) 3.go(n) 4.n>0后退 5. 跳转

  3. $route hash对象

(5.1)代码示例
  1.    <div>  <!-- 使用路由 tag可以渲染成变得标签格式,实际上是帮我们绑定事件 -->
  2.           <router-link tag="div" to="/login" >登录</router-link>
  3.           <router-link to="/res" >注册</router-link>
  4.           <router-link to="/xxx" >异常演示</router-link>
  5.           <!-- 直接使用a标签要加#  -->
  6.           <a href="#/login"> 是</a>
  7.         </div>

六、路由带参

(6.1)怎么传?

a.restful风格 以占位符的形式
  1.   当路由变为xxx的时候要显示的式xx组件,同时要给这个组件传n个参数
  2.     1)restful风格 以占位符的形式,但是每个占位符参与路由筛选的过程
  3.        http://localhost/#/1/2/3  
  4.        /1/2/3  即是参数也是路由规则
  5.        path:"/:a/:b" 就必须完全匹配才能找到的

b.查询字符串的方式
  1.   2)查询字符串的方式,跟传统的url地址传参的形式一样,参数包括
  2.       问号在内的字符串式不参与路由筛选的过程
  3.     http://localhost/login?x=1
  4.     其中?x=1不属于路由配置path ,只有login是path要筛选的

(6.2)怎么取?

a.$route —> 以$开头的组件与实例通用
  1.    查询字符串 
  2.        http://localhost/hongjilin.html?a=11#/login/1/2?a=111
  3.         fullPath: "/login/1/2?a=111"
  4.         hash: ""
  5.         matched: [{…}]
  6.         meta: {}
  7.         name: undefined
  8.         params: {0: "/login/1/2"}
  9.          path: "/login/1/2"
  10.         query: {a: "111"}
  11. //vm.$route.query....

(6.3)具体代码示例

1.query方式传参数
  1. this.$router.push({path: '/user', query: {id: '27001'}});
  2. // 获取参数方式:
  3. this.is = this.$route.query.id;

2.params 方式传递参数
  1. this.$router.push({name: 'user', params: {id: '27001'}});
  2. // 获取参数方式
  3. this.id = this.$route.params.id;
  4. -------------------------------------------------------------------------------------------------
  5. 需要注意的是使用params传参的时候, 路由配置必须按照以下方式来配置, name属性必须有, path后面必须写上传递的参数名, 这样才能保证刷新页面的时候, 参数不会被丢失.
  6. {
  7.     path:'/user/:id',
  8.     name: 'user',
  9.     component: (resolve) => { require(['../components/user/index.vue'], resolve)}
  10. },

七、路由器嵌套

1.前端template代码示例
  1.  <transition mode='out-in'>
  2.         <router-view>
  4.         </router-view>
  5.       </transition>
  6. ---------------------------------------------------------------------
  7. <!-- template最好不要在容器里面 -->
  8. <template id="father">
  9.         <div style="background-color: aquamarine;">
  10.            <h1>我是父亲</h1>
  11.            <router-view></router-view>   
  12.         </div>
  13.     </template>

2.js端代码示例以及注意事项
  1.    {
  2.             path:'/father',
  3.             component:fater,
  4.             children:[
  5.                 {//如果加了/ 代表不能是father/regist 而是直接根目录到regist
  6.                     path:'regist', //father(只显示父亲) //father/regist(在显示父亲的之后再显示儿子)
  7.                     //定义的组件
  8.                     component:res,
  9.                 }
  10.             ]
  11.         },

八、全部代码示例

1.前端html

  1.   <div id="app">
  2.       <transition mode='out-in'>
  3.         <router-view>
  4.         </router-view>
  5.       </transition>
  6.         <div>
  7.           <!-- 使用路由 -->
  8.           <router-link tag="div" to="/login" >登录</router-link>
  9.           <router-link to="/res" >注册</router-link>
  10.           <router-link to="/xxx" >异常演示</router-link>
  11.           <!-- 直接使用a标签要加#  -->
  12.           <a href="#/login"> 是</a>
  13.         </div>
  14.      </div>
  15.  <div>--------------------------------------------------------</div>
  17. <!-- template最好不要在容器里面 -->
  18. <template id="father">
  19.         <div style="background-color: aquamarine;">
  20.            <h1>我是父亲</h1>
  21.            <router-view></router-view>   
  22.         </div>
  23.     </template>
  25.     <template id="login">
  26.         <div>
  27.           <!-- 绑定 -->
  28.           <h1 @click="$emit('hong',1,2,3,4)">login</h1>
  29.           <h1 @click="$emit('dier',1,2,3,4)">惦记我调用第二份父亲方法</h1>
  30.         </div>
  31.     </template>
  32.     <template id="login1">
  33.         <div>
  34.           <h1 @click="$emit('hong',1,2,3,4)">login</h1>
  35.           <h1 @click="$emit('dier',1,2,3,4)">sss</h1>
  36.         </div>
  37.     </template>
  40.     <template id="regist">
  41.         <div>
  42.           <h1>注册</h1>
  43.           <h1>zzz</h1>
  44.         </div>
  45.     </template>
  47.     <!-- template最好不要在容器里面 -->
  48.     <template id="error">
  49.       <!--template的根容器只能有一个  -->
  50.         <div>
  51.           <!-- <h1 v-text="msg" @click="say()"></h1> -->
  52.           <h1>错误找不到</h1>
  53.           <h1>zzz</h1>
  54.         </div>
  55.     </template>

2.路由代码示例

  1. import Vue from '../lib/vue-2.4.0' 
  2. import './index.scss'
  3. import VueRouter from '../lib/vue-router-3.0.1' 
  4. //通过import需要通过use进行挂载
  5. Vue.use(VueRouter)
  7. const login={
  8.     template:'#login',
  9.     data() {  return {   msg:222  } },
  10.     methods:{ say(){alert("我是xxx") }}
  11. }
  12. const res={
  13.         template:'#regist'
  14. }
  15. const fater={
  16.         template:'#father'
  17. }
  18. const error={
  19.     template:"#error"
  20. }
  22. //使用路由的时候将所有组件注册放出来定义
  23. //必须在实例的作用域内
  24. const  router = new VueRouter({
  25.     //路由匹配从上到下,匹配到一个不匹配
  26.     routes:[
  27.         {
  28.             path:'/',
  29.             //重定向到/login
  30.             redirect:'/login'
  31.         },
  32.         {
  33.             path:'/login',
  34.             //定义的组件
  35.             component:login,
  36.         },
  37.         {//这是嵌套组件
  38.             path:'/father',
  39.             component:fater,
  40.             children:[
  41.                 {//如果加了/ 代表不能是father/regist 而是直接根目录到regist
  42.                     path:'regist', //father(只显示父亲) //father/regist(在显示父亲的之后再显示儿子)
  43.                     //定义的组件
  44.                     component:res,
  45.                 }
  46.             ]
  47.         },
  49.         {   //最后找不到的
  50.             path:'*',
  51.             component:error
  52.         }
  53.     ]
  55. })
  58. window.vm=new Vue({
  59.     el:'#app',
  60.     data:{
  61.         msg:"hello world",
  62.         list:[
  63.             1,2,3,4,5
  64.         ],
  65.         flag:false,
  66.         jilin:'login'
  67.     },
  68.     //将定义的路由挂载上来,key与value相同可以缺省
  69.     router,
  70.     methods: {
  71.         del(index){
  72.             this.list.splice(index,1)
  73.         },
  74.         fater(...son){
  75.             alert("我是父亲"+son);
  76.         },
  77.         fater2(...son){
  78.             alert("我是第二份父亲"+son);
  79.         },
  80.     },
  81.     components:{
  82.         // res
  83.       //再外面定义后可以直接引入
  84.     }
  86. })