vue-router的基本使用

vue-router分为4种方式

1.动态路由 2.嵌套路由 3.编程式路由 4.命名路由和命名视图

简单的静态路由demo

步骤：

1.安装vue-router

npm install vue-router

2.新建一个router文件夹，并新建index.js

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

import User from '../containers/user'
import Role from '../containers/role'

Vue.use(VueRouter)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/user',
      component: User,
    },
    {
      path: '/role',
      component: Role
    }
]
})
export default router

注：vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式。当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id

3.在main.js中引入

import router from './router';

new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
});

4.在App.vue中写入<router-view/>

<template>
  <div id="app">
    <header>
      <!-- router-link 定义点击后导航到哪个路径下 -->
      <router-link to="/user">User</router-link>
      <router-link to="/role">Role</router-link>
    </header>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

一、动态路由

除了$route.params外，$route 对象还提供了其它有用的信息，例如，$route.query、$route.hash等等。

应用场景：

当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据，这就要用到动态路由跟路由传参了。

我们在配置路由的时候，将目标组件的路径先配置好，如：

const router = new Router({
  routes: [
    {
      path: '/user/:id',
      component: User,
    }   
]
})

比如多个路由都要进入User组件，这时候在配置路由路径后加个:id(id可随便取名，标识),这个属性id可以在$route.params.id中获取，例如：

<template>
  <div id="app">
    <header>     
      <router-link to="/user/1">User用户</router-link>    
    </header>   
    <router-view></router-view>   
  </div>
</template>

点击“User用户”进入，以上配置的id就等于1；

这时候在地址栏就会出现：http://localhost:8080/#/user/1

User组件中用console.log打印出$route.params.id,就可以看到：1

接着说，带参数的路由，跟获取传来的参数值

当router-link被激活点击时，会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj

传参数的时候，我们就写成对象的形式，用到v-bind的js表达式

<router-link to="{path:'/user/1',query:{name:'叶落森'}}">User</router-link>

<template>
  <div id="app">
    <p>我的id是{{id}}，我叫{{name}}</p>
  </div>
</template>
<script>
export default {
        data () {
            return {
                id:'',
                name:''
            };
        },
        created () {
            this.id=this.$route.params.id
            this.name=this.$route.query.name
        }     
    };
</script>

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化)$route对象

<script>
export default {
  name: "app",
  watch :{
    '$route' (to,from){
      alert(to.params.id);
    }
  }
};
</script>

二、嵌套路由

在实际项目中我们会碰到多层嵌套的组件组合而成，我们实现嵌套路由需要在 VueRouter 的参数中使用 children 配置。例：

import Vue from 'vue'  
import VueRouter from 'vue-router'  
Vue.use(VueRouter)  
  
//引入两个组件  
import home from "./home.vue"  
import user from "./user.vue"  
//定义路由  
const routes = [  
    { path: "/", redirect: "/home" },//重定向,指向了home组件  
    {  
        path: "/home", component: home,  
        children: [  
            { path: "/home/user", component: user }  
        ]  
    }  
] 
//创建路由实例  
const router = new VueRouter({routes})  
export default router

注：路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。

三、编程式路由

除了使用<router-link>创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现

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

router.push:

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

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.replace:

它跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go：

router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

四、命名路由和命名视图

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

以上这两种方式都会把路由导航到 /user/123 路径。

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

vue-router的基本使用

猜你喜欢