【vue-07】vue-router

Vue-router官网

安装

vue-router是一个插件包，所以我们还是需要用npm 来进行安装。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save

如果在一个模块化工程中使用它。必须通过Vue.use()明确地安装路由功能

注意：先引入vue,再引入vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

//显示声明使用VueRouter
Vue.use(VueRouter);

起步

1. 创建一个vue-cli程序 参考链接

2. 安装 参考安装标题

3. 新建组件src/components/Content.vue和Main.vue

Content.vue

<template>
    <h1>内容</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>

Main.vue

<template>
    <h1>主页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

4. 在src下新建一个文件router/index.js,进行创建路由和路由映射

默认情况下，我们进入一个网站的首页，应该先把首页渲染。所以可以设置默认路径。

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入上面自定义的组件
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      path: '/',
      redirect: '/main'
 	},
    {
      //路由路径
      path:'/content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      //跳转的组件
      component:Main
    },
  ]
});

5. 在main.js中挂载路由

import Vue from 'vue'
import App from './App.vue'
import router from "./router"
Vue.config.productionTip = false

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

6. 在App.vue中使用路由

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
  </div>
</template>
....

7. 实现效果

我们会发现URL中存在#,那怎么消除呢？

localhost:8081/#/content

使用HTML5的history模式

默认情况下，路径的改变使用的是URL的hash，如果我们希望使用H5的History模式，可以进行如下配置mode: 'history'。

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入上面自定义的组件
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      path: '/',
      redirect: '/main'
 	},
    {
      //路由路径
      path:'/content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      //跳转的组件
      component:Main
    },
  ],
  mode: 'history'
});

编程式导航

我们使用router-link的to属性，可以直接跳转路由。但是有时候，我们需要执行一段js代码之后，再跳转路由，这时候可以使用编程式导航。

语法：

This.$router.push(‘路由url’)

<button @click="toHome">首页</button>
  methods: {
    toHome() {
      console.log('我将要跳转到首页')
      this.$router.push('/home')
    }
  }

嵌套路由

比如在home页中，我们希望通过/home/news这种形式访问一些组件，在home页的基础上，进行组件展示，这时候可以使用嵌套路由。

实现嵌套路由有两个步骤。

1. 创建对应的子组件，并且在路由配置中配置子路由。

2. 在组件内部使用<router-view>组件

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [ // 配置子路由
      //默认路径news
      {
        path: '', 
        redirect:'news'
      },
      {
        path: 'news',
        component: () => import('../components/news')
      },
      {
        path: 'message',
        component: () => import('../components/message')
      }
    ]
  },
  {
    path: '/about',
    component: () => import('../components/about')
  }

路由传参

路由跳转可进行参数传递，参数传递分为两种：params和query

• params的类型：

配置路由格式：/news/:id

这样就表示，我们在使用news的时候，需要在后面携带id参数。传递参数后的url：/news/123

• query类型

配置路由方式不变。在路由后面使用?key=value传递

router-link传参

```vue

新闻2
```

JS代码传参

 toNews() {
      this.$router.push({
        path: '/home/news',
        query: {name: '李四', age: 24}
      })
    }

获取参数

获取参数通过$route对象获取的。

created() {
    console.log(this.$route.params)
    console.log(this.$route.query)
}

router和route

$route和$router是有区别的

$router是VueRouter实例，想要导航到不同的URL，使用$router.push方法。

$route是当前router的跳转对象，可以获取name、path等等