vue a跳转链接_Vue -----vue-router插件

目录结构

App.vue文件

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{name:'home'}">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link :to="{name:'news',params:{id:111} }">news</router-link> |
      <router-link to="/demos/demo123">demos</router-link>
    </div>
    <hr>
    <span  @click="jumpHome">首页</span>
    <span  @click="jumpAbout">其他</span>
    <router-view/>
  </div>
</template>

<script>
export default {
  name:'App',
  methods:{
    jumpHome(){
      console.log(this);
      this.$router.push('/')
    },
    jumpAbout(){
      console.log(this);
      this.$router.push('/about')
    }
  }
}

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

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.exact-active {
  color: #42b983;
}
span{
    color: #42b983;
  cursor: pointer;
  }
</style>

一 . router-link 其实就是对跳转链接的封装默认的标签是 a标签

属性:

1.to 跳转链接

2.tag 可以改其他标签如(span等):

router-link tag='span' to="/home">home</router-link>

默认类名:

1.router-link-exact-active

当对应的路由匹配成功时, 会自动给当前 router-link 加上该类名在url路径后有 /

2.router-link-exact-active

只是在精准匹配下才会出现的 (/home)

router-link-exact-active
router-link-active

二 . 显示窗口

简单理解一个标签就是一个窗口 (页面)

main.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

懒加载

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

主要代码块 ↓

// which is lazy-loaded when the route is visited. component: () => import(/ webpackChunkName: "about"/ './views/About.vue')

这一注释就是在点击 about的时候可以网页加载时的名

/ webpackChunkName: "about"/

引入的组件路径

'./views/About.vue'

懒加载的方式(推荐方式三)

方式一: 结合Vue的异步组件和Webpack的代码分析.

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

方式二: AMD写法

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

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

const Home = () => import('../components/Home.vue')#目录结构

![目录结构.png](https://upload-images.jianshu.io/upload_images/18887070-b30f0e4deae9776c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###App.vue文件

```
<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{name:'home'}">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link :to="{name:'news',params:{id:111} }">news</router-link> |
      <router-link to="/demos/demo123">demos</router-link>
    </div>
    <hr>
    <span  @click="jumpHome">首页</span>
    <span  @click="jumpAbout">其他</span>
    <router-view/>
  </div>
</template>

<script>
export default {
  name:'App',
  methods:{
    jumpHome(){
      console.log(this);
      this.$router.push('/')
    },
    jumpAbout(){
      console.log(this);
      this.$router.push('/about')
    }
  }
}

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

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.exact-active {
  color: #42b983;
}
span{
    color: #42b983;
  cursor: pointer;
  }
</style>

```

##一 . router-link 其实就是对跳转链接的封装默认的标签是 a标签

##属性:

####1.to 跳转链接

####2.tag 可以改其他标签如(span等):

```
router-link tag='span' to="/home">home</router-link>
```

##默认类名:

#####1.router-link-exact-active

当对应的路由匹配成功时, 会自动给当前 router-link 加上该类名

在url路径后有 /

####2.router-link-exact-active

只是在精准匹配下才会出现的 (/home)

```
router-link-exact-active
router-link-active
```

##二 . <router-view/> 显示窗口

**简单理解一个标签就是一个窗口 (页面)**

<hr>

# main.js文件

```
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})
```

### 懒加载

>当打包构建应用时，Javascript 包会变得非常大，影响页面加载。

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

###主要代码块 ↓

>// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')

**这一注释就是在点击 about的时候可以网页加载时的名**

>/* webpackChunkName: "about" */

**引入的组件路径**

> './views/About.vue'

#懒加载的方式(推荐方式三)

####方式一: 结合Vue的异步组件和Webpack的代码分析.

```
const Home = resolve => { require.ensure(['../components/Home.vue'], 
    () => { resolve(require('../components/Home.vue')) }
)};
```

####方式二: AMD写法

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

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

```
const Home = () => import('../components/Home.vue')
```

原文链接：https://blog.csdn.net/weixin_34603814/article/details/113450360