Vue-router入门

Posted 2020-10-26 First·林肯

1、npm install vue-router --save-dev 安装路由包，在安装脚手架时实际上可以直接安装

2、解读核心文件 router/index.js文件

import Vue from \'vue\'   //引入Vue
import Router from \'vue-router\'  //引入vue-router
import Hello from \'@/components/Hello\'  //引入根目录下的Hello.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: \'/\',         //链接路径
      name: \'Hello\',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

　　

3、小试牛刀，创建一个Hi页面 希望在地址了输入 http://localhost:8080/#/hi 是如下的样子

 

步骤：

1）：在src/components目录下，新建 Hi.vue 文件，并编写文件内容

2）：引入 Hi组件：我们在router/index.js文件的上边引入Hi组件 import Hi from \'@/components/Hi\'

3）：增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。

{

path:\'/hi\',

name:\'Hi\',

component:Hi

}

 

4、router-link制作导航

<router-link to="/">[显示字段]</router-link>

• to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成  to=”/”  ，
• [显示字段] ：就是我们要显示给用户的导航名称，比如首页  新闻页。