Vue--静态路由
2022-10-27 本文已影响0人
蒜泥捣莓
Vue静态路由
<div id="app">
<router-link to="/home" tag="span">home</router-link>
<router-link to="/index" tag="span>index</router-link>
<router-view></router-view>
</div>
const Home ={
template:`
<div>Home组件</div>
`
}
const Index ={
template:`
<div>Index组件</div>
`
}
const router= new VueRouter({
mode:'hash',
routes:[
{
path:"/home",
component:Home,
},
{
path:"/index",
component:Index,
}
]
})
let vm = new Vue({
el:"#app",
router,
})
<html>
<body>
<div id="app">
<router-link to="/home" tag="div">Home组件</router-link>
<router-link to="/index" tag="div">Index组件</router-link>
<router-view></router-view>
</div>
</body>
<script>
const Home={
template:`<div>home组件</div>`
}
const Index={
template:`<div>index组件</div>`
}
const router = new VueRouter({
mode:"hash",
routes:[
{
path:"/home",
component:Home,
},
{
path:"/index",
component:Index,
}
]
})
let vm = new Vue({
el:"#app",
router,
})
</script>
</html>
<html>
<body>
<div id="app">
<button @click="toHome">home</button>
<button @click="toIndex">index</button>
<!--
<button @click="$router.push("home")"></button>
<button @click="$router.push("index")"></button>
-->
<router-view></router-view>
</div>
</body>
<script>
const Home={
template:`<div>home组件</div>`
}
const Index={
template:`<div>index组件</div>`
}
const router =new VueRouter({
mode:"hash",
routes:[
{
name:'home',
path:"/home",
component:Home,
},
{
name:"index",
path:"/index",
component:Index,
}
]
})
let vm = new Vue({
el:"#app",
router,
methods:{
"toHome"(){
// this.$router.push("/home")
// this.$router.push({name:"home"})
this.$router.push({path:"/home"})
},
"toIndex"(){
// this.$router.push("/index")
// this.$router.push({name:"index"})
this.$router.push({path:"/index"})
}
}
})
</script>
</html>
