vue--day78---路由的基本使用
### 1.基本使用
1. 安装vue-router，命令：```npm i vue-router```
2. 应用插件：```Vue.use(VueRouter)```
3. 编写router配置项:
```js
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
```
4. 实现切换（active-class可配置高亮样式）
```vue
<router-link active-class="active" to="/about">About</router-link>
```
5. 指定展示位置
```vue
<router-view></router-view>
```
1. index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<!--针对IE 浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面-->
<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" />
<!--引入第三方样式-->
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css" />
<!--配置网络标题 找pckgage.json 里面的name 做为标题-->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!--当浏览器步支持js 时noscript 中的元素会被渲染-->
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2. router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
import About from '../components/About'
import Home from '../components/Home'
// 创建并且暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
})
3. main.js
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
import App from './App.vue'
// 引入
import VueRouter from 'vue-router'
import router from './router'
//关闭vue 的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
// const Demo=Vue.extend({})
// const d=new Demo();
// Vue.prototype.x=d;
// 创建Vue 实例对象--vm
new Vue({
//将 app 组件放入到容器中
render: h => h(App),
router:router
}).$mount('#app')
4. App.vue<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!--原始html 中我们使用a 标签 实现页面的跳转-->
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<!--VUE 中借助router-link 标签实现路由的切换-->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置-->
<!-- <h2>此处到底展示什么组件，得看用户点击哪个导航项</h2> -->
<!-- <router-view></router-view> -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
5. About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name:'About',
}
</script>
<style>
</style>
6. Home.vue
<template>
<h2>我是home的内容</h2>
</template>
<script>
export default {
name:'Home',
}
</script>
<style>
</style>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！