Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)
阅读原文时间:2022年04月03日阅读:1

脚手架Vue-CLI(路由Router)

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

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

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

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

第三步:导出路由实例

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

第五步:使用路由,通过

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

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

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


<%= htmlWebpackPlugin.options.title %>

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

3.根组件代码: App.vue

根组件代码: 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.属性补充

to属性: Home 默认渲染成标签

tag属性: Home 渲染成