<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="" name="Keywords">
<meta content="" name="description"/>
<title></title>
<link rel="icon" href="">
<style>
.router-link-active{
color: #ee2ad6;
}
</style>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!-- router-link 標簽上的tag 是修改展示的標簽元素的 不寫的話默認 a標簽
active-class 是控制當前選中狀態的類名的，后邊跟的值就是選中狀態下的類名
不寫這個屬性，默認選中的類名就是 router-link-active
exact-active-class 精確（會把傳的一些參數認成不同路徑）匹配 路由
不寫這個屬性，默認選中的類名就是 router-link-exact-active
-->
<!-- <router-link to="/home" tag="button" active-class="current">首頁</router-link>
<router-link to="/list" tag="button" exact-active-class="exactClass">列表頁</router-link>-->
<!--query 這個單詞是vue-router 規定的；
后邊跟的是個對象，router會把對象中的每一項拼接到路由后邊-->
<router-link :to="{path:'/home',query:{name:12,age:13}}">首頁</router-link>
<!--params 這個單詞也是vue-router規定的，它是對象中的參數當做路拼到之前的路徑上
這個地方不能再用path跳轉 必須用name跳轉-->
<router-link :to="{name:'q',params:{name:12}}"> 列表頁</router-link>
<router-view></router-view>
</div>
</body>
</html>
<script src="node/node_modules/vue/dist/vue.js"></script>
<script src="node/node_modules/vue-router/dist/vue-router.js"></script>
<script>
let home = {
template:"<h2>首頁</h2>",
mounted(){
console.log(this.$route.query); //通過$route 可以獲取路徑上的參數
console.log(this);
}
};
let list = {
template:"<h2>列表頁</h2>",
mounted(){
console.log(this.$route.params);
console.log(this);
}
};
const routes=[
{
path:'/home',
component:home
},
{
path:'/list/:name', //若想要路徑傳參，則需要在路徑參數對應的位置寫成:變量的形式
//這個變量會對應上 在行內設置的params對象中的屬性名對應的屬性值
name:'q', //若想用路徑傳參，則必須用name去指定跳轉路徑
component:list
}
];
const router=new VueRouter({
routes,
// mode:'history'
linkActiveClass:'current2' , //這個是給全局的選中狀態下的 router-link修改類名
linkExactActiveClass:'activeClass'
});
let vm = new Vue({
el: '#app',
data: {},
router,
created(){
},
directives: {},
methods: {},
computed: {},
watch: {},
filters: {}
})
</script>
router-link的使用方法
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。