vue-router路由

Posted 2021-02-14 theblogs

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>