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

2022-11-09 17:36:51

脚手架Vue-CLI(路由Router)

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

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

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

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

第三步:导出路由实例

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

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

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

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

1.入口代码: main.js

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

//项目的启动入口

//导入文

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.动态路由

码农公寓

脚手架Vue-CLI(路由Router)

相关文章