vue-router路由

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

自动全局安装：

vue create 项目名称

手动配置：

1、安装

在app项目文件夹里面

npm i vue-router

2、在min.js下引入包

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router';

3、使用use来引用（使用）

Vue.use(VueRouter);

4、需要配置router -> route.js

引入组件，配置路由表
配置路由表（当前是哪个路径需要执行哪个组件）

const routes = [

//配置什么路径就走哪个组件

  {

      path:'/', //根路径

      component:app //app就是根

  },

  {

    path: '/foo',//路径

    component: Foo//组件

  },

  {

    path: '/bar',

    component: Bar

  }

];

export default new VueRouter({

    router:routes

    //等同于

    //router

})

在new vue-router时候，通过routes来引配置数

new Vue时候是通过router来引路由

5、放到跟下

 new Vue({

    el:'#app',

    render:()=>h,

    router

 })

6、渲染，在页面中定义router-view 标签

<router-link></router-link>

//有children时候，父组件必须有router-view

<router-view></router-view>

//路由匹配到的组件将渲染在这里

<router-link>//默认会渲染成一个a标签

<router-link tag="button">

//这样可以加一个按钮的样式

<router-link>

to属性

表示目标路由的链接

通过 to 属性指定目标地址
默认渲染成带有正确链接的 <a> 标签

/*字符串*/

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

/*v-bind 的 JS 表达式 */

如果是:to，路径要写成字符串

比如<router-link :to="'home'">Home</router-link>

:to 可以是字符串也可以是对象

/*命名的路由 params*/

<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>

:to="{path:'a'}"

:to="{params:{a:5}}"

注意：如果使用params，那么就不能定义path，改为使用name

tag属性

具有tag属性的router-link会被渲染成相应的标签

//比如生成一个按钮

<router-link tag ="button"></router-link>

replace属性

replace在routre-link标签中添加后，页面切换时不会留下历史记录

<router-link :to="/home" replace></router-link>

active-class属性

默认值 "router-link-active"

设置链接激活时使用的 CSS 类名

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

可以在router.js文件中设置

const router = new VueRouter({

  mode: 'hash',

  linkActiveClass: 'u-link--Active', // 这是链接激活时的class

})

exact属性

开启router-link的严格模式，默认值 false

//这个链接只会在地址为 / 的时候被激活

<router-link :to="/" exact>home</router-link>

exact-active-class属性

默认值 router-link-exact-active

配置当链接被精确匹配的时候应该激活的 class

激活class 应用在外层元素

让激活 class 应用在外层元素，而不是 <a> 标签本身,可以用 <router-link> 渲染外层元素，包裹着内层的原生 <a> 标签

<router-link tag="li" to="/foo">

  <a>/foo</a>

</router-link>

路由嵌套

路由嵌套就是有多层路由嵌套在一起，也就是子路由

栗子：

APP.vue文件

<template>

  <div id="app">

    <router-link to="/" tag="button">home</router-link>

    <router-link to="/About" tag="button">about</router-link>

    <router-view></router-view>

  </div>

</template>

<script>

</script>

<style>

.actived{

  background:orange;

}

</style>

About.vue文件

（里面包含sub1、sub2、sub3三个子路由页面）

<template>

  <div class="about">

    <h1>This is an about page</h1>

    <router-link to="/about/sub1" tag="button">sub1</router-link>

    <router-link to="/about/sub2" tag="button">sub2</router-link>

    <router-link to="/about/sub3" tag="button">sub3</router-link>

    <router-view></router-view>

  </div>

</template>

<script>

export default {

  name:'about'

}

</script>

router.js路由文件

 import Vue from 'vue';

 import VueRouter from 'vue-router';

 import Home from '../views/Home.vue'

 import About from '../views/About.vue'

 import Sub1 from '../views/sub/sub1.vue'

 import Sub2 from '../views/sub/sub2.vue'

 import Sub3 from '../views/sub/sub3.vue'

 Vue.use(VueRouter);

 const routes = [

     {

         path:'/',

         component:Home

     },

     {

         path:'/About',

         component:About,

         children:[

             {

                 path:'sub1',

                 component:Sub1

             },

             {

                 path:'sub2',

                 component:Sub2

             },

             {

                 path:'sub3',

                 component:Sub3

             }

         ]

     }

 ]

 export default new VueRouter({

     linkExactActiveClass:'actived',//精确匹配选中的样式

     routes

 });

在路由上挂一个children属性，children为一个数组

子路由路径不用加/

对于<router-view></router-view>的用法

如果有子级路由，那么记得在父级身上加<router-view></router-view>

此时组件就会在父级组件显示

不管嵌套多少层都遵循此规则，多级嵌套的话可以使用一个模板

正常写法中，一层路径(/xxx)对应一个router-view

比如url: /a/b/c

那/a对应的就是App.vue中的router-view，/a进入a.vue中

那/a/b对应的就是a.vue中的router-view， /a/b进入b.vue中

巴特西

vue-router路由

最新文章

热门文章