簡單路由
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript" ></script>
<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
<title>路由</title>
</head>
<body>
<div id="app">
<p>
<router-link to='/g'>購物車</router-link>
<router-link to='/d'>我的訂單</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
/*定義路由元件*/
//可以從其他檔案import進來
const car ={template:'<div>購物車頁面</div>'}
const order = {template:'<div>訂單頁面</div>'}
/*定義路由*/
//每個路由應該映射一個元件
const myroutes=[
{path:'/g',component:car},
{path:'/d',component:order}
]
/*建立router執行個體，然後傳'routes'配置*/
const myr =new VueRouter({
routes:myroutes
})
/*建立和挂載根執行個體*/
const app =new Vue({
router:myr
}).$mount('#app')
/*建立根執行個體對象*/
// const app =new Vue({
// /*建立路由對象*/
// router:new VueRouter({
// /*指定路由*/
// routes:[
// {path:'/g',component:{template:'<div>購物車頁面</div>'}},
// {path:'/d',component:{template:'<div>訂單頁面</div>'}}
// ]
// })
// }).$mount('#app')
</script>
</body>
</html>
嵌套路由
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript" ></script>
<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
<title>路由</title>
</head>
<body>
<div id="app">
<p>
<router-link to='/aa/car'>購物車</router-link>
<router-link to='/aa/order'>我的訂單</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
/*定義路由元件*/
//可以從其他檔案import進來
const carson ={template:'<div>購物車子頁面</div>'}
const orderson = {template:'<div>訂單子頁面</div>'}
const car ={
template:"<div v-if=\"$route.params.id=='car'\"><router-link to='/aa/car/carson'>購物車頁面</router-link><router-view></router-view></div>"+
"<div v-else-if=\"$route.params.id=='order'\"><router-link to='/aa/car/orderson'>我的訂單</router-link><router-view></router-view></div>"
}
/*定義路由*/
//每個路由應該映射一個元件
const myroutes=[
{path:'/aa/:id',component:car,children:[{path:'carson',component:carson},{path:'orderson',component:orderson}]},
]
/*建立router執行個體，然後傳'routes'配置*/
const myr =new VueRouter({
routes:myroutes
})
/*建立和挂載根執行個體*/
const app =new Vue({
router:myr
}).$mount('#app')
</script>
</body>
</html>
動态路由
<!DOCTYPE html>
<html>
<!--動态路由即是給傳id值-->
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript"></script>
<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
<title>路由</title>
</head>
<body>
<div id="app">
<p>
<router-link to='/g'>購物車</router-link>
<router-link to='/d/dson'>我的訂單</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
/*定義路由元件*/
const p={
template:"<div v-if=\"$route.params.id=='g'\"><router-link to='/g/gson'>購物車頁面</router-link><router-view></router-view></div>"+"<div v-else-if=\"$route.params.id=='d'\">訂單頁面<router-view></router-view></div>"
}
const gson={
template:"<div>123123<router-view></router-view></div>"
}
//定義一個路由
const rout=[
{path:'/:id',component:p,children:[{path:'gson',component:gson}]}
]
/*建立router執行個體，然後傳'routes'配置*/
const myr =new VueRouter({
routes:rout
})
/*建立和挂載根執行個體*/
const app =new Vue({
router:myr
}).$mount('#app')
</script>
</body>
</html>
程式設計導航路由
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript" ></script>
<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
<title>路由</title>
</head>
<body>
<div id="app">
<p>
<button v-on:click="show(0)">購物車</button>
<button v-on:click="show(1)">我的訂單</button>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
/*定義路由元件*/
//可以從其他檔案import進來
const car ={template:'<div>購物車頁面</div>'}
const order = {template:'<div>訂單頁面</div>'}
/*定義路由*/
//每個路由應該映射一個元件
const myroutes=[
{path:'/g',component:car},
// {path:'/d',component:order}
]
/*建立router執行個體，然後傳'routes'配置*/
const myr =new VueRouter({
routes:myroutes
})
/*建立和挂載根執行個體*/
const app =new Vue({
router:myr,
methods:{
show:function(num){
if(num==){
// myr.push('g')
myr.push({path:'g',query:{name:'hello'}})
}else{
// myr.push('d')
myr.push({path:'d',query:{name:'world'}}) //query參數是在位址拼接參數
}
}
}
}).$mount('#app')
window.onload=app.show()
</script>
</body>
</html>
命名視圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript" ></script>
<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
<title>路由</title>
</head>
<body>
<div id="app">
<p>
<router-link to='/g'>購物車</router-link>
<router-link to='/d'>我的訂單</router-link>
</p>
<router-view></router-view>
<router-view name="a"></router-view>
</div>
<script type="text/javascript">
/*定義路由元件*/
//可以從其他檔案import進來
const car ={template:'<div>購物車頁面</div>'}
const order = {template:'<div>訂單頁面</div>'}
const shop = {template:'<div>商品頁面</div>'}
/*定義路由*/
//每個路由應該映射一個元件
const myroutes=[
/*注意這裡的是components ，不是component*/
{path:'/g',components:{default:car,a:order}},
{path:'/d',components:{default:order,a:shop}}
]
/*建立router執行個體，然後傳'routes'配置*/
const myr =new VueRouter({
routes:myroutes
})
/*建立和挂載根執行個體*/
const app =new Vue({
router:myr
}).$mount('#app')
</script>
</body>
</html>
![vue-cli3配置生産的環境變量和開發的環境變量小記[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)