vue-cli3中路由(router)的基本使用

HarryZhang 2019年07月09日 91次浏览

安装

如果你的项目用中还没有安装vue-router可以先进行一个安装:

npm install vue-router --save

配置

先来看看具体的结构:

Snipaste_2019-07-09_09-23-08

  1. 先创建啷个基本的组件Home和About
  2. 然后引入路由,在src下创建一个router的文件夹用来存放路由,当然如果不复杂直接在界面写也不是不行,但是推荐前者!! 3.在router文件夹下创建一个index.js用来配置路由,相当于路由的一个入口
import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
    routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About },
        { path: '/', redirect: '/home' }
    ]
}
)

如果想让一开始就默认选定某个路由加上下面的配置就好,redirect中 填写的是对应组件的路径,不是名字!

 { path: '/', redirect: '/home' }
  1. main.js文件中配置路由器
//创建vue实例
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

注意: 导入路由的是import router from './router' 会自动找index.js(router文件夹下) 5. App.vue中使用路由

<template>
  <div>
    <p>This is Index</p>
    <ul>
      <li>
        <!--路由链接-->
        <router-link to="/home">Home</router-link>
      </li>
      <li>
        <router-link to="/about">about</router-link>
      </li>
    </ul>

    <div>
      <!-- 路由对应组件的显示 -->
      <router-view></router-view>
    </div>
  </div>
</template>

结果

done

路由的编程式导航

配置好路由的项目中,我们可以在任意Vue组件内部,通过this.$router访问路由对象, 通过 $router.push()方法,我们可以向路由推送跳转,实现组件的切换。

this.$router.push(path):相当于点击路由链接(可以返回到当前路由界面) this.$router.replace(path):用新路由替换当前路由(不可以返回到当前路由界面) this.$router.back(): 请求(返回)上一个记录路由

路由参数传递

this.$router.push({name:"product‐list", query:{"name":val}});

路由参数获取

路径参数与获取 我们在路由映射中(router.js)定义了以下一项:

{ path:'/product/:id', name:'product', component: ProductDetail }

此时跳转的链接就可以是

<router‐link :to="{name:'product',params:{id:1}}">产品1连接</router‐link>

我们可以在目标组件中,通过 “$router.params.参数名” 获取到路径参数值:

let id = this.$route.params.id;

查询字符串参数的获取 路径参数是URL路径的一部分,通常只能用于传递必要参数(一定要提供的参数),对于可选参数就应该使用查询字符串的方式来传递,例如:“search?name=abc&page=101”。

对于查询字符串参数,我们可以通过以下方式传递。

this.$router.push({name:"product‐list", query:{"name":‘xxx’}});

上述路由推送会产生类似这样的URL:product­list?name=xxxx 这时,我们可以在目标组件ProducList中,通过“$router.query.参数名”获取查询字符串参数值。

let searchName = this.$route.query.name