您的位置:首页 > Web前端 > Vue.js

vue路由配置及两种路由跳转方法

2018-11-02 18:35 645 查看

路由

1.Vue-rotuer开发(五步法)

 1)新建router目录

  通过npm安装vue-router

  Npm install --save vue-router

  2)在index.js中使用Vue.use()加载插件:

[code] import Vue from 'vue'
 import App from './App'
 import VueRouter from 'vue-router'
 Vue.use(VueRouter);//注册路由

3)配置路由(index.js)

[code]export default new Router({

  routes: [

   {

        path : ‘/’,  //到时候地址栏会显示的路径

        name : ‘Home’,

        component :  Home   // Home是组件的名字,这个路由对应跳转到的组件。。注意component没有加“s”.

    },

    {

        path : ‘/content’,

        name : ‘Content’,

        component :  Content

    }

],

 })

又在main.js中完成配置和路由实例

[code]import Vue from 'vue'
import App from './App'
import router from './router'
var vue=new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
 })

4)<router-link :to=”/home”></router-link>路由入口

配置完成后在对应根实例app.vue中添加路由视图<vue-router></vue-router>来挂载所有路由组件:

[code]<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {  }
</script>

路由跳转     

 两种方法:

1.内置<router-link></router-link>组件,它被渲染为<a>标签:

<router-link :to="/about">跳转到about</router-link>

设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。

2.使用router实例的方法,比如在about.vue中通过点击事件跳转:

[code]<template>
          <div>
           <button @click="handleRouter">跳转到user</button>

  </div>

</template>

<script>

export default {

methods:{
handleRouter(){
       this.$router.push("/user");
  } }
</script>

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: