webpack中使用vue-router

一、webpack中使用vue-router

1.新建路由
2.新建vue页面

二、示例

1.新建路由

默认路由文件是src/router/index.js
1.先引入vue页面，@是当前文件路径，src
2.创建路由

import SayHi_test from '@/components/SayHi_test'
export default new Router({
  routes: [
     {
          path: '/hello', //路径
          name: 'hello_world',//vue内部使用的名称
          component: SayHi_test //对应的.vue页面名字
      }
  ]
} )

2.创建vue页面

src/components/SayHi_test.vue

<template>
    <div class="hi">
        hello
    </div>

</template>

<script>
    export default {
        data(){
            return {
                message: "这里是helloworld页面。"
            }
        }
    }
</script>

<style>
    .hi{
        color: chartreuse;
        font-size: 30px;
    }

</style>

3.在Index.vue中引入

src/components/Index.vue

<template>
	<div>
 		<ul>
            <li>
                <router-link :to="{name: 'hello_world'}">
                    Hi，请点击我，跳转到helloworld页面
                </router-link>
                : 第一个Vue页面~~~~
            </li>
        </ul>
	 </div>  
 </template>     

---