[Vue]路由配置
概念路由：控制组件之间的跳转，不是先请求不用刷新页面，直接跳转/切换组件配置/src/router/index.js引入import Vue from 'vue'import Router from 'vue-router'注册Vue.use(Router)引入路由对应的组件地址import component from '@/components/Home'import Home from '@
·
概念
路由：控制组件之间的跳转，不是先请求不用刷新页面，直接跳转/切换组件
配置
/src/router/index.js
-
引入
import Vue from 'vue' import Router from 'vue-router' -
注册
Vue.use(Router) -
引入路由对应的组件地址
import component from '@/components/Home' import Home from '@/components/Content’
配置路由
import Home from '@/components/Home';
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
//默认路径下显示该路由
{
path: '/',
name: 'HelloWorld',
component: HelloWorld //组件名称，这个路由对应跳转的组件
},{
path: '/home',
name: 'Home',
component: Home
}
]
})
- 上面已经配置了两个路由，当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候，就会在 <router-view> 中渲染 home.vue 组件
- Home相当于是这个页面的主界面，其他的页面都是嵌套在这个页面里面的，所以有动态变化的地方都要有<router-view>
- 如果被嵌入的页面部分下还有下一级页面，则需要在一级路由中嵌套二级路由，修改router/index.js
-
在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头
-
添加 mode: ‘history’ 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录
-
App.vue作为一个存放组件的入口容器，其中 < router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，< router-view> 中的内容也会发生更改
routes: [ //默认路径下显示该路由 { path: '/', name: 'home', component: Home, children:[ {path:'/', component:Login } ] },{ path: '/hello', name: 'helloWorld', component: HelloWorld } ] - 在配置的路由后面，添加 children，并在 children 中添加二级路由，就能实现路由嵌套 - 配置 path 的时候，以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / "
配置main.js
在main.js中调用index.js的配置
import router from './router'
App.vue页面使用（展示）路由
<router-view></router-view>
路由切换
<router-link to="/">切换到Home组件</router-link>
<router-link to="/content">切换到Content组件</router-link>
动态路由配置
- 使用场景：需要把某种模式匹配到的所有路由，全都映射到同个组件（例如：我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染）
- 在 vue-router 的路由路径中使用动态路径参数
- 一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用
完成配置实例
src/router/index.js
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import Home from '@/components/Home'
4 import Content from '@/components/Content'
5 import About from '@/components/About'
6 import Submit from '@/components/Submit'
7
8 Vue.use(Router)
9
10 export default new Router({
11 routes: [
12 {
13 path: '/',
14 name: 'Home',
15 component: Home
16 },
17 {
18 path: '/content',
19 name: 'Content',
20 component: Content
21 },
22 {
23 path: '/about',
24 name: 'About',
25 component: About
26 },
27 {
28 path: '/submit',
29 name: 'Submit',
30 component: Submit
31 }
32 ],
33 mode: "history"//干掉地址栏里边的#号键
34 })
src/router/index.js(router的主要配置文件)
main.js
1 // The Vue build version to load with the `import` command
2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 import Vue from 'vue'
4 import App from './App'
5 import router from './router'
6 import VueResource from 'vue-resource'//从node_modules里边把vue-resource引入进来，同引入vue文件和引入vue-router一个道理
7
8 Vue.config.productionTip = false;
9 Vue.use(VueResource)
10
11 //这样以后，就可以在任何组件页面中使用http了
12 /* eslint-disable no-new */
13 new Vue({
14 el: '#app',
15 router,//引用router
16 template: '<App/>',
17 components: { App }
18 })
App.vue展示Vue
1 <template>
2 <div id="app">
3 <app-header></app-header>
4 <app-nav></app-nav>
5 <!-- 展示router -->
6 <router-view></router-view>
7 <app-footer></app-footer>
8 </div>
9 </template>
10
11 <script>
12 import Header from './components/Header'
13 import Footer from './components/Footer'
14 import Navbar from './components/Navbar'
15 export default {
16 name: 'app',
17 data () {
18 return {
19
20 }
21 },
22 components: {//局部注册组件这里，可能会定义多个组件，所以component这个单词加上“s”
23 "app-header": Header,
24 "app-footer": Footer,
25 'app-nav': Navbar
26 }
27 }
28 </script>
29
30 <style>
31
32 </style>
导航页面的路由链接设置，用于切换组件
1 <template>
2 <nav class="app-nav">
3 <ul class="ul-father">
4 <li class="li-father" v-for="item in arr" v-on:mouseover="item.show = ! item.show" v-on:mouseout="item.show = ! item.show" v-bind:class="{bgchange: item.show}">
5 <!-- 路由切换组件 -->
6 <router-link v-bind:to="item.url">
7 {{ item.title }}
8 </router-link>
9 <template v-if="item.value">
10 <ul class="ul-child" v-show="item.show">
11 <li class="li-child" v-for="x in item.value">
12 <a href="javascript:;">
13 {{ x }}
14 </a>
15 </li>
16 </ul>
17 </template>
18 </li>
19 </ul>
20 </nav>
21 </template>
22 <script>
23 export default {
24 name: "app-nav",
25 data (){
26 return {
27 arr: [
28 {
29 title: "首页",
30 value: ["一","二","三","四"],
31 url: "/",
32 show: false
33 },
34 {
35 title: "新闻" ,
36 value: ["二","二","三","四"],
37 url: "/content",
38 show: false
39 },
40 {
41 title: "关于",
42 url: "/about"
43 },
44 {
45 title: "投稿",
46 url: "/submit"
47 }
48 ]
49 }
50 }
51 }
52 </script>
53 <style scoped>
54 .app-nav{
55 margin-bottom: 20px;
56 }
57 ul.ul-father {
58 background: Lightgreen;
59 margin: 0;
60 }
61 .li-father {
62 position: relative;
63 display: inline-block;
64 width: 20%;
65 margin: 0;
66 }
67 li a {
68 display: block;
69 padding: 15px 0;
70 color: #333;
71 text-decoration: none;
72 }
73 li a:hover,.bgchange>a{
74 color: #fff;
75 background: #222;
76 }
77 .ul-child{
78 position: absolute;
79 top: 51px;
80 left: 0;
81 width: 100%;
82 background: Lightgreen;
83 }
84 </style>
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)