VueRouter

一、Vue中的路由管理

Vue Router是Vue.js官方的路由管理器

安装： npm install vue-router -S

二、路由的使用

1. 设置路由规则
2. 配置路由规则
3. 设置路由切换后的页面显示位置
4. 在模板中实现路由跳转

2.1 、设置路由规则

const routes = [
    //页面1
    {path:"/foo",component:Foo},
    //页面2
    {path:"/about",component:About}

]

2.2 配置路由规则

// 在项目根路径下新建router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.user(VueRouter)
const router = new VueRouter({
	routes //相当于routes:routes
})

// 在main.js中配置
new Vue({
	el:'#app'
	router
})

2.3 设置路由切换后的页面显示位置

在模板中指定路由切换后组件的渲染位置

<router-view></router-view>

2.4 在模板中实现路由跳转

<router-link to="/about"></router-link>

三、路由中的参数传递

 动态路由匹配

1. 设置动态匹配规则
2. 在组件中获取匹配参数的值

3.1 设置动态匹配规则

动态路由参数

        :name

示例代码：

const router = new VueRouter({
	routes: [
		{ path:'/detail/:id', component:Detail }
	]
})

在js中获取参数

let id = this.$route.params.id

响应参数变化

watch:{

    $route(to,from){

    //对路由变化做出响应
}
}

3.2 在组件中获取查询参数

URL中的查询参数

/sight/list?name=名称

获取参数

let name = this.$route.query.name

四、路由中的跳转

在模板中跳转

按照path跳转

let id = 123
<router-link :to="{path:'/detail/ + id}'">详情</router-link>

<router-link :to="{path:'/list',query:{name:'名称'}}">查询</router-link>

按名称跳转

import SightDetail from '@/views/sight/Detail.vue
    {
        path:'/detail/:id',
        name:'detail',
        component:SightDetail
    }

<router-link :to="{name:'detail',params:{id:123}}">
</router-link>
<router-link :to="{name:'list',query:{name:'名称'}}">查
间</router-link>

在js中跳转

this.$router.push({name:'detail',params:{id:123}})

this.$router.push({name:'detail',query:name:"名称"'})

路由的跳转方式

页面跳转

this.$router.push(location,onComplete?,onAbort?)

页面前进或后退

this.$router.go(n)

替换浏览历史记录

this.$router.replace(location,onComplete?,onAbort？)

this.$router.replace({name:'detail'})

router.js

// VueRouter是Vue.js的一个插件
Vue.use(VueRouter)

// 定义路由规则
const routes = [
  {path: '/home', component: HomePage, name: 'home'},
  {path: '/about', component: AboutPage},
  {path: '/d/:id/:types', component: DetailPage, name: 'detail-page'}
]

const route = new VueRouter({
  // routes: routes
  routes
})

export default route

main.js

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

app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-link to="/home">首页</router-link> | 
    <router-link to="/about">关于</router-link>|
    <router-link to="/d/123/type1">详情1</router-link>|
    <router-link :to='"/d/" + id + "/" + types'>详情2</router-link>|
    <router-link :to='{path: "/d/" + id + "/" + types, query: {name: "abc", sort: "desc"}}'>详情3</router-link>|
    <router-link :to='{name: "detail-page", params: {id: "abc123", types: "type3"}, query: {name: "abc", sort: "desc"}}'>详情4</router-link>|
    <a href="javascript:;" @click="goHome">点我跳转</a>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- 路由变化之后，在这里显示组件的内容 -->
    <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data () {
    return {
      id: 456,
      types: 'type2'
    }
  },
  methods: {
    goHome () {
      // this.$router.push({name: 'home'})
      // this.$router.push({name: "detail-page", params: {id: "abc123", types: "type3"}, query: {name: "abc", sort: "desc"}})
      // this.$router.go(-1)
      this.$router.replace({name: 'home'})
    }
  },
  components: {
    // HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>