1：router.js的配置和(六)小节的完全一致
2: button按钮跳转
<button @click="gohone('ssww',no)">编程模式js跳转路由</button>
<button @click="gohone()">js编程模式调js函数跳转</button>
(1):动态路由传值
<button @click="`this.$router.push({ path: '/Details/22/${no}'})`">编程模式js路由跳转实现动态路由传值</button>
<button @click="this.$router.push({ path: '/Details/2211/6655' })"> 编程模式js路由跳转实现动态路由传值 </button>
<button @click="this.$router.push({ path: '/n1/2211/6655' })"> 别名的方式跳转并且实现动态路由传值 </button>
<button @click="this.$router.push({name: 'DetailsRoute', params: { id: '3322', no: '45' } })">命名路由实现动态路由传值 </button>
(2):get传值
<button @click="this.$router.push({ path: '/getdetail', query: { id: 55, no: 322 } })">编程模式js路由跳转实现get传值</button>
<button @click="this.$router.push({ path: '/n1', query: { id: 55, no: 322 } })">别名的方式跳转并且实现get传值</button>
<button @click="this.$router.push({ name: 'GetdetailRoute', query: { id: '3322', no: '45' }})">命名路由实现get传值</button>
3：在methods里面定义gohone方法
<script>
export default {
name: "App",
components: {},
methods: {
gohone() {
this.$router.push({
path: "/NewsPath",
});
},
},
};
</script>
3：接收页接收参数
(1)如果是get传参过来的,用this.$route.query.id方式获取传过来的参数
export default {
name: 'GetDetailFrom',
props: {
},mounted(){//页面加载完后执行得钩子事件
alert(this.$route.query.id)
alert(this.$route.query.no)
}
};
(2)如果是动态路由传参过来的,用this.$route.params.id方式获取传过来的参数
export default {
name: 'DetailFrom',
props: {
},mounted(){//页面加载完后执行得钩子事件
alert(this.$route.params.id)
alert(this.$route.params.no)
}
};