路由----初始

1.相关认识

 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务

 前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue 就像jQuery和dom操作一样

 

2.引入

2.1.cdn自己网上随便看看

 

2.2 自己npm下载引入使用

 //安装到项目中:

 npm i vue-router --save-dev//注意:这种下载不好,因为打包之后容易出问题

 npm i vue-router --save或者 npm i vue-router --S

 

 在main.js入口文件中引入

 import Vue from "vue"

 import VueRouter from "vue-router"//引入路由工具

 import App from "./App.vue"

 Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router

 

 //创建路由工具

 const router=new VueRouter({

 //routes路由器 生成很多网址对应的切换组件

 routes:[{path:"/home",component:()=>import("./home.vue")},

             {path:"/about",component:()=>import("./about.vue")}]

 })

 new Vue({

 router,//把路由挂载到页面

 render(h){return h(App)}

 }).$mount("#app")

 

 

2.3 cli安装

 vue create xxapp

空格键选择router

然后回车

自定就会把路由安装好

 

// 注册路由

const routes = [

  {

    path: '/',

    name: 'home',

    component: HomeView //可以直接导入组件后注册组件

  },

  {

    path: '/login',

    name: 'login',

    component: function () {

      return import( '../views/login/index.vue') //异步注册组件

    }

  }

]

 

 

3.router-view和router-link 标签

router-view:相当于 路由网址匹配到的组件 会渲染到当前组件的这个标签上(学不学的会路由 就看能不能理解这个)

router-link:相当于a标签,给我们提供跳转到某个路由的功能,如果没有匹配到路由就会跳转失败:

 

跳转页面方式：

        <router-link to="/login">to login </router-link><br>

 

        <router-link :to="{path:'/login'}">to login </router-link><br>

 

        <button @click="go">to login</button>

            methods:{

                go(){

                    this.$router.push("/login")

                }

            }

 

4.动态路由&传参路由传参有2种方式

传递的参数都在路由信息对象中: 路由对应的组件中获取 this.$route

 

4.1 query传参

        <router-link to="/login?id=123&&psw=2345">to login </router-link><br>

        <router-link :to="{path:'/login',query:{id:12244,psw:23424}}">to login </router-link><br>

        <button @click="go">to login</button>

            methods:{

                go(){

                    this.$router.push("/login/id=123&&psw=2345") //这里的路由需要组注册过才行

                      }

            }

 取值：

    mounted(){

        console.log(this.$route.query)

    }

 

 

 

4.2动态路由传参====>params

注意：

利用params对象传值时，使用路由的name注册的连接路由和params进行传值，因为如果提供了 path，params 会被忽略。

利用网址传值时要带上路由设置的变量才能传值

        <router-link to="/login/id:123&&pws:00000">to login </router-link><br>

 

        <router-link :to="{name:'login',params:{id:12244,pws:3545}}">to login </router-link><br>

 

        <button @click="go">to login</button>

            methods:{

                go(){

                    this.$router.push({name:'login',params:{id:12244}})

                }

            }

 

取值：

    mounted(){

        console.log(this.$route.params)

    }

 

 

5.路由嵌套--子路由跳转

*代表所有匹配都通过

redirect代表重定向

//注意:子路由中的匹配地址不要在前面加/ 否则就会认为是根路由

 

路由配置：(children)

注意

1配置子路由的路径时不要加/，因为/代表根路径；要加/就要从根路径开始填。

2在父组件中要加上<router-view></router-view>

  {

    path: '/login',

    name: 'login',

    component: function () {

      return import('../views/login/index.vue')

    },

    children: [{

        path: 'a1',

        name: 'a1',

        component: function () {

          return import('../views/login/views/a1/index.vue')

        }

      },

      {

        path: 'a2',

        name: 'a2',

        component: function () {

          return import('../views/login/views/a2/index.vue')

        }

      }

    ]

  },

 

6.路由模式--hash&history(面试)

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：

history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。 后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

 

Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

 

总结：

  // history底层是切换组件得方式是使用H5的windows.history的技术，当地址栏的history状态发生变化时，

  // 切换了router-view渲染得组件来"欺骗"用户 达到切换新网页得效果

  // hash切换组件得方式是使用是的老技术Hash值，当地址栏的hash发生变化时，

  // 切换了router-view渲染得组件来"欺骗"用户 达到切换新网页得效果,hash值是不会发送给后端的