vue-router 路由详解及在项目中的使用详情及细节

我们要实现单页应用程序，所以我们要学习路由。

1.1. SPA

single-page application，单页应用。一个应用程序只有一个页面。

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内容（通过div切换显示和隐藏，或者是数据的渲染），从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

（php中，单入口程序）

优点：提供流畅的用户体验，避免了不必要的跳转和重新渲染，服务器压力小。

缺点：不利于seo; 初次加载页面更耗时; 历史管理需要编程实现

传统的网页：地址各不一样

超市

https://pro.m.jd.com/mall/active/2hqsQcyM5bEUVSStkN3BwrBHqVLd/index.html

牛奶

https://pro.m.jd.com/mall/active/3nxcGU8mCsjXN5MjTGQ1AX2LbdfF/index.html

Spa:小米主页

https://m.mi.com/#/index

https://m.mi.com/#/product/view?product_id=2172300011

https://m.mi.com/#/product/view?product_id=10000061

1.2. spa的实现

页面只有一个，但是，你要根据用户的地址栏中的信息去展示不同的内容给用户，怎么办？

两种方法：

Ø 动态组件

Ø 路由

1.2.1. 动态组件

动态组件的功能有限（例如，不能传参），我们可以去使用另一种方法–路由。

1.3. vue-router基本使用

它是一个单独的js文件。

先下载，然后在页面中引用。

必须在vue之后引入。

1.3.1. 准备好组件对象

1.3.2. 2.用router-link和router-view准备好视图

1.3.2.1. router-link

router-link最后，会被编译成a标签，如下 ：

to属性用来指定路由 — 相当于a标签的href属性。它必不可少。

1.3.2.2. router-view

是一个占位符，用来装当前的组件。

1.3.3. 3.实例化 路由对象

let router = new VueRouter({

routes: [ {path:”/”,component:组件1},{path:”/add”,component:组件2}]

})

配置路由。指定路由和组件之间的关系

下图中红色部分是路由

1.3.4. 4.在vue实例中配置router

你要注意，上面的写法是简写方式。相当于：router:router .

如果你前面创建的路由对象不叫router，如下：

则不能简写，必须写全。

1.3.5. 效果如下：

1.4. 嵌套路由

1.4.1. 定义
实际开发中的应用界面，通常由多层嵌套的组件组合而成，如：设置项中还有设置的子项。

1.4.2. 实现

（1）设置视图 。 在子组件中，再次使用router-link和router-view。

（2）修改路由配置。设置相关路由的children项

let router = new VueRouter({

routes: [

           {

                  path:”/setting”,

                  component:setting,

                  children:[ {path:”/setting/set1”,component:子组件} ]

          },

})

1.4.3. 示例

在前面的案例的基础上，给设置页，下面再加两个子页。

1.4.3.1. 第一步：设置好子组件。

对应的两个template如下：

1.4.3.2. 第二步：修改setting组件的视图
因为 这个两个子组件将会嵌套在setting视图中，所以我们要去修改setting组件的视图：加上router-link 和router-view.

1.4.3.3. 第三步：修改路由配置

1.4.3.4. 效果如下:

如果还有三级的嵌套，做法跟上面是一致的。

1.5. 动态路由-传递参数
例如：商品详情页：

https://m.mi.com/#/product/view?product_id=10000022

https://m.mi.com/#/product/view?product_id=6458

上面两个地址实际上共用一个页面，但由于传递的参数不同，则显示内容也不同。

这种带参数的路由，就是动态路由。

1.query传参：
1.query传参
路由：

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { name:'register',path: '/register', component: register } // name 或 path
      ]
    })

导航：

    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link :to={path:'register',query:{id:5,name:'lili'}}>注册</router-link>

等同于：

	router.push(‘/login?id=10&name=zs’)
	router.push({path:'register',query:{id:5,name:'lili'}})

**注意：**在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router访问路由实例。因此你可以调用this.router.push。
this.KaTeX parse error: Expected 'EOF', got '&' at position 26: …h(‘/login?id=10&̲name=zs’) this…router.push({path:‘register’,query:{id:5,name:‘lili’}})
1
2
3
4
5
6
7
8
9
10
注意：jquery可以通过name或path来引入路由

2.params传参
2.params传参
路由：

var router = new VueRouter({
  routes: [
    { path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id） 刷新页面 参数会消失
    { name:'register', path: '/register', component: register }
  ]
})

导航：

    <router-link to="/login/12/ls">登录</router-link>
    <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>

1
2
注意：params只能通过name来引入路由，path会undefined

jquery传参和params传参的区别
1.用法上:
1.上文已经提到query可以用name或path来引入
2.params必需要用name来引入，接收参数都是类似的，分别是this.route.query.name和this. route.query.name和this.route.query.name和this.route.params.name。

2.地址栏表现形式上:
query：

params：（注意：这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失）

1.5.1. 实现
可以在 vue-router 的路由路径中使用 动态路径参数。

动态路径参数 以冒号开头

{ path: ‘/detail/:id’, component: 组件}

当匹配到一个路由时，参数值会被设置到 this.$route.params.id，可以在每个组件内使用。

1.5.2. 示例 – 只有一个参数

在上面的基础，再加一个显示商品详情的组件detail，它的功能是根据不同的商品的编号，去加载商品的信息，再显示出来。

1.5.2.1. 创建一个组件对象

它对应的template如下：

1.5.2.2. 修改路由配置

1.5.2.3. 测试路由

1.5.3. 示例 – 多个参数

只需修改相关的路由规则即可：

如上：表示detail必须要跟两个参数。如下：

/detail/01/abc 这可以匹配成功 。abc的值就是01，xyz的值就是abc

/detail/01 这不能匹配

可以把多个规则对应一个组件：

1.6. 编程式路由-实现页面跳转

对比理解：页面跳转有两种方法

Ø a标签可以设置href之后，实现页面跳转。

Ø 另外，还有一种方法去实现页面跳转：写代码
Window.location = “”

如下：

添加click之后：
document.getElementById(“btn”).onclick = function() { window.location = “http://www.baidu.com”}

就可以实现点击跳转了。

编程式路由：就像通过用代码设置location一样，去进行页面的跳转。

1.6.1. 格式：

router.push({ path: ‘home’ })

1.6.2. 示例

点击上面的按钮，直接打开商品编号为100的详情页。

方法f()如下：

注意：这里是$router ，而在获取参数时， this.$router，而在获取参数时，this.route.params.abc

效果如下：

1.7. 重定向配置

重定向：当我们在地址栏中访问一个a网址时，会跳转到b网址。

直接通过路由设置来完成：

 const router = new VueRouter({

  routes: [

    { path: '/a', redirect: '/b' }

  ]

})

示例：

如下 ：