Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

脚手架Vue-CLI(路由Router)

一按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装.

二使用(上面按装下面步骤自动会生成)

第一步:导入路由对象,并且调用Vue.use(VueRouter)

第二步:创建路由实例,并且传入路由映射配置

第三步:导出路由实例

第四步:在Vue实例中挂载创建的路由实例

第五步:使用路由,通过<router-link>和<router-view>

<router-link>是vuerouter内置的一个组件,默认被渲染成为一个<a>标签(还可以渲染成其它标签,后面补充)

<router-view>该标签会根据当前的路径,动态渲染出不同的组件,组件占位,放到哪里就会把对应的组件渲染到哪里

1.入口代码: main.js

//项目的启动入口
//导入文
import Vue from 'vue'
import App from './App.vue'
import router from './router'

//发布产品终端下显示提示(true)
Vue.config.productionTip = false

//创建Vue根实例,配置路由router
new Vue({
  router, // 第四步:在Vue实例中挂载创建的路由实例
  render: h => h(App)
}).$mount('#app')

入口代码:main.js

2.单页面的入口节点代码: public下的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 单页面的入口节点-->
    <!-- 最终所有组件会被render替换渲染到这里-->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

单页面的入口节点代码: public下的 index.html

3.根组件代码: App.vue

<template>
<!--根组件-->
  <div id="app">
<!--第五步:使用路由,通过<router-link>和<router-view>-->
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!--路由出口,组件占位,组件渲染显示的位置-->
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

根组件代码: App.vu

4.路由代码: router下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' //导入Home组件

// 第一步:导入路由对象,并且调用Vue.use(VueRouter)
Vue.use(VueRouter)
// 第二步:创建路由实例,并且传入路由映射配置,一个组件一个映射关系
const routes = [
  {
    path: '/',   //显示组件路径
    // component: Home  //组件名,路径显示为:http://localhost:8080/#/
    redirect: '/Home'  //重定向到首页,路径显示为:http://localhost:8080/#/Home
  },
  {
    path: '/Home',   //显示组件路径
    name: 'Home',
    component: Home  //组件名
  },
  {
    path: '/about',  //显示组件路径
    name: 'About',  //组件名
    // 懒加载,当访问路由时延迟加载.导入About组件
    component: () => import(
        /* webpackChunkName:
         "about" */ '../views/About.vue'
        )
  }
]
// 第三步：导出 routes 为 router
const router = new VueRouter({
  routes
})
export default router

路由代码: router下的index.js

5.路由映射配置重定向配置redirect

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' //导入Home组件

// 第一步:导入路由对象,并且调用Vue.use(VueRouter)
Vue.use(VueRouter)
// 第二步:创建路由实例,并且传入路由映射配置,一个组件一个映射关系
const routes = [
  {
    path: '/',   //显示组件路径
    // component: Home  //组件名,路径显示为:http://localhost:8080/#/
    redirect: '/Home'  //重定向到首页,路径显示为:http://localhost:8080/#/Home
  },
  {
    path: '/Home',   //显示组件路径
    name: 'Home',
    component: Home  //组件名
  },
  {
    path: '/about',  //显示组件路径
    name: 'About',  //组件名
    // 懒加载,当访问路由时延迟加载.导入About组件
    component: () => import(
        /* webpackChunkName:
         "about" */ '../views/About.vue'
        )
  }
]
// 第三步：导出 routes 为 router
const router = new VueRouter({
  routes
})
export default router

路由映射配置重定向配置redirect

6.路由的默认值模式和history模式(路由中有无#号)

默认哈希模式显示: http://localhost:8080/#/Home,
history模式显示: http://localhost:8080/Home

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' //导入Home组件

// 第一步:导入路由对象,并且调用Vue.use(VueRouter)
Vue.use(VueRouter)
// 第二步:创建路由实例,并且传入路由映射配置,一个组件一个映射关系
const routes = [
    {
        path: '/',   //显示组件路径
        // component: Home  //组件名,路径显示为:http://localhost:8080/#/
        redirect: '/Home'  //重定向到首页,路径显示为:http://localhost:8080/#/Home
    },
    {
        path: '/Home',   //显示组件路径
        name: 'Home',
        component: Home  //组件名
    },
    {
        path: '/about',  //显示组件路径
        name: 'About',  //组件名
        // 懒加载,当访问路由时延迟加载.导入About组件
        component: () => import(/* webpackChunkName:"about" */ '../views/About.vue')
    }
]
// 第三步：导出 routes 为 router
const router = new VueRouter({
    routes,
    mode:'history' //默认哈希模式http://localhost:8080/#/Home,html5中history模式,http://localhost:8080/Home
})
export default router

路由的默认值模式和history模式

7.<router-link>属性补充

to属性: <router-link to="/">Home</router-link> 默认渲染成<a>标签

tag属性: <router-link to="/" tag="button">Home</router-link> 渲染成<button>按钮,可以渲染成其它标签

replace属性: <router-link to="/" replace">Home</router-link> 网页返回按钮不起作用,多个<router-link>同时加上

active-class属性: 当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个rouer-link-active 的class(class="router-link-active)

<template>
<!--根组件-->
  <div id="app">
<!--第五步:使用路由,通过<router-link>和<router-view>-->
    <div id="nav">
      <!--默认渲染成<a>标签-->
<!--      <router-link to="/">Home</router-link> |-->
      <!--tag="button"渲染成<button>按钮-->
<!--      <router-link to="/" tag="button">Home</router-link> |-->
      <!--replace网页返回按钮不起作用,多个<router-link>同时加上-->
      <router-link to="/" replace>Home</router-link> |
      <router-link to="/about" replace>About</router-link>
    </div>
    <!--路由出口,组件占位,组件渲染显示的位置-->
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

router-link属性补充

8.动态路由