vue-router路由的配置及用法

1、安装路由：如果在安装vue的时候没有安装路由，要单独安装，在命令行工具里cd到项目路径下输入npm install vue-router --save-dev大概要几十秒的时间，安装完成后2、在main.js中引入路由模块import VueRouter from 'vue-router'3、在main.js使用路由Vue.use(VueRouter)4、配置路由const router=ne

ranran_sun

4341人浏览 · 2018-01-18 11:45:59

ranran_sun · 2018-01-18 11:45:59 发布

1、安装路由：如果在安装vue的时候没有安装路由，要单独安装，在命令行工具里cd到项目路径下输入npm install vue-router --save-dev

大概要几十秒的时间，安装完成后

2、在main.js中引入路由模块import VueRouter from 'vue-router'

3、在main.js使用路由Vue.use(VueRouter)

4、配置路由

const router=new VueRouter({
  routes:[
          {path：”/”,component：Home}//路由的地址，抓到路由的地址后，调用component跳转到一个地址
]

5、在main.js中引入Home组件 import Home from ‘./components/Home’

6、在vue实例中使用路由New Vue({ router })

重跑竟然报错：

好吧，注册的时候路径写错Header前面少了/...........尴尬......修改好了就可以正常使用了，这时的地址栏是这样的

把#去掉，输入下面的就可以了

7、切换两个标签无刷新效果，将a标签换为router-link后面的to里的值要和配置的路由相对应

打开设置默认路由：redirect

这个vue-router就实现了啦啦啦~

http：vue-resource的安装(npm install vue-resource --save-dev)和使用和vue-router的前三步是一样的，测试使用网络接口：http://jsonplaceholder.typicode.com/

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^