VUE中路由的重定向——redirect

VUE中路由的重定向——redirect重定向：path中的url地址不能和redirect中的{path:'/',redirect:'/index'},代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=de

一个前端女子

21511人浏览 · 2022-03-12 12:28:53

一个前端女子 · 2022-03-12 12:28:53 发布

VUE中路由的重定向——redirect

重定向：path中的url地址不能和redirect中的

{
path:'/',
redirect: '/index'
},

代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.router-link-exact-active{
color: orange;
}
</style>
</head>
<script src="./js/vue.js"></script>
<script src="js/vue-router.js"></script>
<body>
<!-- s -->
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/case">客户案例</router-link>
<router-link to="/news">新闻中心</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/">中心</router-link>
<router-view></router-view>
</div>
<template id="index">
<div>
<p>首页</p>
</div>
</template>
<template id="case">
<div>
<p>客户案例</p>
</div>
</template>
<template id="news">
<div>
<p>新闻中心</p>
<hr>
<router-link to="/news/one">行业新闻</router-link>
<router-link to="/news/two">南迅新闻</router-link>
<!-- <router-link :to="{name:'news.one',path:'/news/one'}">行业新闻</router-link> -->
<!-- <router-link :to="{name:'news.two',path:'/news/two'}">南迅新闻</router-link> -->
<router-view></router-view>
</div>
</template>
<template id="one">
<div>
<p>行业新闻</p>
</div>
</template>
<template id="two">
<div>
<p>南迅新闻</p>
</div>
</template>
<template id="about">
<div>
<p>关于我们</p>
</div>
</template>
<script>
// 首页组件
var Index = {
template:'#index'
}
var Case = {
template:'#case'
}
var News = {
template:'#news'
}
var About = {
template:'#about'
}
var One = {
template:'#one'
}
var Two = {
template:'#two'
}
Vue.use(VueRouter);
var router = new VueRouter({
routes:[
{
path:'/index',
name:'index',
component:Index

},
//------------------------------   重定向 --------------------------------------------
{
path:'/',
redirect: '/index'
},
{
path:'/case',
name:'case',
component:Case

},
{
path:'/news',
name:'news',
component:News,
children:[
{
path:'/news/one',
name:'news.one',
component:One,
},
{
path:'/news/two',
name:'news.two',
component:Two,
},

]

},
{
path:'/about',
name:'about',
component: About

},
]
})
var vm = new Vue({
el: '#app',
router,
data: {},
methods: {},
components: {
Index,
Case,
News,
About,
One,
Two
}
});
</script>
</body>

</html>