vue路由

Vue.js 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

https://www.jianshu.com/p/9a7d79249741 详细看这篇博客

基础路由

假设有一个地址

http://www.xxx.com/path/a/b/c.html?key1=Tiger && key2=Chain && key3=fuck#/path/d/e.html

http:协议
www.xxx.com:域名
/path/a/b/c.html:路由，即服务器上的资源
?key1=Tiger && key2=Chain && key3=fuck：这个很好理解 Get 请求的参数
#/path/d/e.html：hash 也叫散列值，也叫锚点

上面的 hash 是和浏览器交互的，其它的都是和服务器进行交互

通过上述我们知道，前端路由的实现方式有两种：

（1）、一是改变 hash 值，监听 hashchange 事件，可以兼容低版本浏览器。hash改变不会导致浏览器刷新请求服务器

（2）、二是通过 H5 的 history API 来监听 popState 事件，使用 pushState 和 replaceState 实现

vue路由

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，即要显示的内容。

 <body>
   <!-- 导入相应js文件 -->
<script src="vue.js"></script>
<script src="vue-router.js"></script>
 
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
   <!-- <router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，
   即要显示的内容。 -->
    <!-- router-link其实就是创建了一个a标签来完成了导航的链接 -->
    <router-link to="/foos">Go to Foo</router-link>
    <router-link to="/bars">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
  <script type="text/javascript">
    // 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由声明路由规则 
//把路径所对应要跳转的组件先定义出来【相当于一个配置项】，
到时候浏览器地址会指定到对应路由下会自动跳转到所对应的组件【这样就完成了路由功能】
// 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，

const abc = [
  { path: '/foos', component: Foo },
  { path: '/bars', component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes:abc 
})
 
// 4. 创建和挂载根实例。$mount手动挂载，做一个扩展把扩展挂载到DOM上，类似el功能
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
 
  </script>
</div>
  </body>

同个路由，多个视图，需要用到多个组件的话

 components: {
        default: Foo,
        a: Bar,
        b: Baz
      }

而路由中component获取页面的原理是

导入语法引用了单页面vue文件
webpack找到单页面vue文件
将单页面文件内容交给vue-loader
vue-loader将原始的vue文件拆分为template，js，css三部分
template被编译成为渲染函数放到了js里
js和css再分别交给babel-loader，css-loader style-loader处理

在开发中我们设置的路径虽然不一致，但我们希望跳转到同一个页面，或打开同一个组件。这时就用到了路由重定向 redirect参数。就是可以让其他路径跳转到redirect指定路径

router-view会匹配router中url配对的组件，来渲染该组件（Vue.component('RouterView', View);router-view是vue-router注入完自动注册的

<router-link> 相关属性

接下来我们可以了解下更多关于 <router-link> 的属性。

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

append

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

有时候想要 <router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

设置链接激活时使用的 CSS 类名。可以通过以下代码来替代。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

注意这里 class 使用 active_class="_active"。

exact-active-class

配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

https://www.cnblogs.com/beyrl-blog/p/8655766.html

vue框架中路由

步骤1、

在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件

import router from './router' //这里引入的是router目录，会默认识别里面的index.js文件（不能是其他名字）

实例化vue中加入路由router

步骤2、

app.vue app.vue中的template写入<router-view/>,路由会将匹配到的组件渲染到

步骤3

在router/index.js文件中创建路由并配置路由映射，并通过export输出router到main.js文件中

const router=new VueRouter({ routes: <从routes.js中exprot default的组件> })

步骤4

routes.js代码中 path 就是 router-link to后面跟的链接，注意保持一致，component 对应的组件

redirect是指重定向，将根路径重定向到指定路径。

vue-router参数

path：可分我固定的参数url 和带参数的区别于：（冒号）
name：对应的参数的模块名称（动态传参数）

redirect后边的是默认显示的第一个页面的路径。

可以在对应显示组件<template>中加标签，但是<template>只能有一个子标签。在组件的vue里面加上<style>里面写样式代码

path就是路径，路由就是什么样的路径访问什么样的页面，就跟道路上的路牌一样。path 这里表示这个站点什么样的路径到什么样的页面组件，就是url上面的#后面内容。可自定义而component就是映射的组件，具体显示内容

 routes: [
        {path: "/index", component: HomePage},
        {path: "/login", component: Login},
        {path: "*", redirect:'/index'},//这个意思就是如果浏览器地址栏输入的不是'/index'也不是'/login'，那我就让它跳转到'index'页面
    ]

{path: "*", redirect:'/index'}

*号代表匹配所有路径，注意这句要放在其他路径的最后面。

由于我这个前端项目只配置了2个路径：‘index’和'login'，所以我需要当浏览器地址栏输入的不是'/index'也不是'/login'时，那我就让它前端控制路由跳转到'index'页面

个人理解 routes.js里面写好组件然后router文件夹里面的index.js import组件创建router实例，传router配置。然后路由匹配的组件由路由出口<router-view>显示

路由的跳转

https://www.cnblogs.com/wisewrong/p/6277262.html

router.push(location)

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击等同于调用 router.push(…)。

声明式：<router-link :to="...">

编程式：router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

$route 和 $router的区别

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

举例：history对象

$router.push({path:'home'});//本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

方法：

$router.replace({path:'home'});//替换路由，没有历史记录

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

我们可以从vue devtools中看到每个路由对象的不同

这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。
$route.params
对象，包含路由中的动态片段和全匹配片段的键值对
$route.query
对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == 'yes' 。
$route.router
路由规则所属的路由器（以及其所属的组件）。
$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。

$route.path, $route.params, $route.name, $route.query这几个属性很容易理解，看示例就能知道它们代表的含义

个人总结

http:（协议）//www.xxx.com（域名）/path/a/b/c.html（路由）?key1=Tiger && key2=Chain && key3=fuck（get请求参数）#/path/d/e.html（锚点）

vue路由。<route-link>组件用于设置一个导航链接，to是目标 <router-link to="/foos">Go to Foo</router-link>

router-view 路由出口，匹配到的组件渲染这里 1、定义路由组件 2、定义路由声明路由规则，每个路由应该映射一个组件

3、创建router实例 new VueRouter({}) 4、创建和挂载根实例 <router-link>相关属性 to replace append tag active-class exact-active-class event

posted @ 2020-06-16 17:02 Ren小白阅读(163) 评论(0) 收藏举报

刷新页面返回顶部

Ren小白

vue路由

Vue.js 路由

基础路由

vue路由

<router-link> 相关属性

vue框架中路由

vue-router参数

路由的跳转

$route 和 $router的区别

个人总结

公告