vue路由vue-router

1 安装

步骤一：安装vue-router

npm install vue-router --save

步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

1. 导入路由对象，并且调用Vue.use(VueRouter)
2. 创建路由实例，并且传入路由映射配置
3. 在Vue实例中挂载创建的路由实例

2 使用vue-router的步骤

1. 创建路由组件
2. 配置路由映射：组件和路径映射的关系
3. 使用路由：通过router-link> 和router-view>

router-link>
    ：该标签是一个vue-router中已经内置的组件，它会被渲染成一个a>
    标签

router-view>
    ：该标签会根据当前路径，渲染出不同的组件

网页中其他的内容，比如顶部的标题/导航，或者底部的一些版权信息会和router-view>
    出于同一个等级

在路由切换时，切换的是router-view>
    挂载的组件，其他内容不会发生改变

3 history模式

index.js的export中添加

mode: 'history'

4 router-link补充

tag属性：渲染为指定元素

router-link to="/home" tag="button">
    首页/router-link>
    

replace属性：该属性不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中

router-link to="/home" tag="button" replace>
    首页/router-link>
    

active-class：当router-link> 对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称

• 在进行高亮显示的导航菜单挥着底部tabbar时，会使用到该类
• 但是通常不会修改类的属性，会直接使用默认的router-link-active即可

router-link-active属性修改为active

router-link to="/home" tag="button" replace active-class="active">
    首页/router-link>
    

5 代码跳转路由

button @click="homeClick">
    首页/button>

methods: {

  homeClick() {
    
    // 通过代码的范式修改路径 vue-router
    this.$router.push('/home')
    console.log('homeClick');

  }

}

6 动态路由

{

  path: '/user/:userId',
  name: 'User',
  component: User
}
    

子路由获取参数

template>
    
  div>
    
    h2>
    我是用户界面/h2>
    
    p>
    用户信息/p>
    
    h2>
{
{
 userId }
}
    /h2>
    
    h2>
{
{
 $route.params.userId }
}
    /h2>
    
  /div>
    
/template>
    

script>

  export default {

    name: "User",
    computed: {

      userId() {

        return this.$route.params.userId
      }

    }

  }
    

/script>
    

7 路由的懒加载

• 当导包构建应用时，javascript包会变得非常大，影响页面加载
• 如果我们能把不同路由的对应组件分割成不同的代码块，然后当路由被访问的时候才能加载对应的组件，这样就更高效了

路由懒加载做了什么

• 主要所用是将路由的对应组件打包成一个个的js代码块
• 只有在这个路由被访问到的时候，才加载对应的组件

index.js

方式一：

const Home = resolve =>
 {
    
  require.ensurre(['../components/Home.vue'],()=>
{

    resolve(require('../components/Home.vue'))
  }
)
}
    

方式二：AMD写法

const About = resolve =>
     require(['../compontents/About.vue'], resolve);
    

方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

// 懒加载方法导入(一个懒加载对应一个js文件)
const Home = () =>
     import('../components/Home')

8 嵌套路由

Home.vue

router-link to="/home/news">
    新闻/router-link>
    
router-link to="/home/message">
    消息/router-link>
    

router-view>
    /router-view>

index.js

{

  path: '/home',
  name: 'Home',
  component: Home,
  children: [
    {

      path: '',
      redirect: '/news'
    }
,
    {

      path: 'news',
      component: HomeNews
    }
,
    {

      path: 'message',
      component: HomeMessage
    }
,
  ]
}
    ,

9 传递参数

• params类型：/route/:id
• query：类型 /router?id=123

button和router-link方法二选一

http://localhost:8080/profile?id=1& name=charles

# router-link
router-link :to="{
 path: '/profile',query:{
id:'1',name:'charles'}
}
    ">
    个人资料/router-link>
    

# button
button @click="userClick">
    用户/button>
    
button @click="profileClick">
    个人资料/button>
    
router-view>
    /router-view>


userClick() {

  this.$router.push('/user/' + this.userId)
}
,
profileClick() {

  this.$router.push({

    path: '/profile',
    query: {

      id: 2,
      name: 'tom'
    }

  }
)
}
    

profile.vue

h2>
{
{
 $route.query.id }
}
    /h2>
    
 h2>
{
{
 $route.query.name }
}
    /h2>
    

10 导航守卫

// 前置守卫(guard)
router.beforeEach((to, from, next) =>
 {

  document.title = to.matched[0].meta.title
  next()
}
    )
// 后置钩子(hook)
router.afterEach((to,from)=>
{

  
}
)

index.js

{

  path: '/about',
  name: 'About',
  meta: {

    title: '关于'
  }
,
  component: About
}
    ,

About.vue

script>

  export default {

    name: "Home",
    created() {
      // 创建组件
      console.log('created');

      // document.title = '首页'
      document.title = to.matched[0].meta.title
    }
,
    // mounted() {
      // 挂载到dom
    //   console.log('mounted');

    // }
,
    // updated() {
     // 界面发生刷新
    //   console.log('updated');

    // }

  }
    
/script>

11 keep-alive遇见vue-router

• keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

（1）include：字符串或正则表达式，只有匹配的组件会被缓存

（2）exclude：字符串或正则表达式，任何匹配的组件都不会被缓存

• router-view：也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存

// 这两个函数，只有该组件被保持了装填使用keep-alive时，才是有效的
activated() {

  this.$router.push(this.path)
}
,
beforeRouteLeave(to, from, next) {
    
  this.path = this.$route.path;

  next()
}
    

keep-alive>
    
  router-view/>
    
/keep-alive>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！