【vue-05】vue-cli

Vue-router官网

安装

vue-router是一个插件包，所以我们还是需要用npm 来进行安装。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save

如果在一个模块化工程中使用它。必须通过Vue.use()明确地安装路由功能

注意：先引入vue,再引入vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

//显示声明使用VueRouter
Vue.use(VueRouter);

测试

1. 创建一个vue-cli程序 参考链接

2. 安装 参考安装标题

3. 新建组件src/components/Content.vue和Main.vue

Content.vue

<template>
    <h1>内容</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>

Main.vue

<template>
    <h1>主页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

4. 在src下新建一个文件router/index.js,进行创建路由和路由映射

默认情况下，我们进入一个网站的首页，应该先把首页渲染。所以可以设置默认路径。

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入上面自定义的组件
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      path: '/',
      redirect: '/main'
 	},
    {
      //路由路径
      path:'/content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      //跳转的组件
      component:Main
    },
  ]
});

5. 在main.js中挂载路由

import Vue from 'vue'
import App from './App.vue'
import router from "./router"
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

6. 在App.vue中使用路由

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
  </div>
</template>
....

7. 实现效果

我们会发现URL中存在#,那怎么消除呢？

localhost:8081/#/content

使用HTML5的history模式

默认情况下，路径的改变使用的是URL的hash，如果我们希望使用H5的History模式，可以进行如下配置mode: 'history'。

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入上面自定义的组件
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      path: '/',
      redirect: '/main'
 	},
    {
      //路由路径
      path:'/content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      //跳转的组件
      component:Main
    },
  ],
  mode: 'history'
});