vue中如何使用路由

vue中路由的使用

1. 定义组件

<template>
  <div class="hello">
    <h1 @click="info" :class="color">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '我是Hello组件',
      color:'color'
    }
  },
  methods:{
      info(){
          console.log('你点击了我');
      }
  }
}
</script>

<style>
    .color{
        color:#630;
    }
</style>

2. 配置路由文件

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Word from '@/components/Word';
Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            component: Hello
        },
        {
            path:'/index',
            component:Word
        }
    ]
})

3. 配置路由插座

<template>
  <div id="app">
    <!--可以定义不变的内容-->
    <h3>{{title}}</h3>
    <!--定义路由插座-->
    <router-view></router-view>
    <!--可以定义不变的内容-->
  </div>
</template>

<script>
export default{
    name:'app',
    data(){
        return{
            title:'我是项目主入口'
        }
    }
}
</script>

4. 路由文件注入到main.js文件中

import Vue from 'vue';
import Router from 'vue-router';
import App from './App';
import router from './router/index';


Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    render(h){
        return h(App);
    }
})

配置路由的跳转

1. 路由的跳转使用标签router-link

<ul>
    <li><router-link to="/">Hello页面</router-link></li>
    <li><router-link to="/word">word页面</router-link></li>
</ul>
<!-- 定义路由插座 -->
<router-view></router-view>

2. to是通过绑定数据到上面

<ul>
    <li><router-link to="/">Hello页面</router-link></li>
    <li><router-link :to="word">word页面</router-link></li>
</ul>
<!-- 定义路由插座 -->
<router-view></router-view>
<script>
export default{
    name:'app',
    data(){
        return{
            title:'我是项目主入口',
            word:'/word'
        }
    }
}
</script>

简单的路由介绍 希望可以有所帮助