使用Vue-cli初始化单页面应用
使用npm或cnpm安装 vue-cli
cnpm install -g vue-cli
使用vue命令安装项目包
vue init webpack cli
安装vue-route时选Yes,其他都选No
进入到项目目录,安装依赖包并运行
cd cli
cnpm install
npm run dev
引入vue-router.js
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.js"></script>
路由的使用
<div id="app">
<router-link to="/applive">Live</router-link>
<router-link to="/applisten">Listen</router-link>
<router-view></router-view>
</div>
<script>
const applive={
template:'<h1>appLive</h1>'
};
const applisten={
template:'<h1>appListen</h1>'
};
//定义路由器
let route = new VueRouter({
routes:[
{path:'/live',component:applive},
{path:'/listen',component:applisten},
]
});
new Vue({
el:'#app',
router:route,
data:{
},
});
</script>
vue-router 路由参数以及伪静态
<div id="app">
<router-link to="/content">内容</router-link>
{{$route.params.cid}}
{{$route.params.cid}} <!--在页面中接收参数-->
<router-view></router-view>
</div>
<script type="text/x-template" id="content">
<div>
<button @click="show">参数</button>
</div>
</script>
<script>
const content={
template:'#content',
methods:{
show()
{
console.log(this.$route.params); //在控制台接收参数
}
}
};
//定义路由器
let routes = [
{path:'/content-:cid-show-:id.html',component:content},
];
//把组件交给路由
let router = new VueRouter({routes});
var app = new Vue({
el:'#app',
router,
data:{
},
});
</script>
vue路由参数验证处理,保证路由安全
let routes = [
{path:'/content/:id(\\{2})',component:content}, //正则验证,表示限制id必须为两位数字
];
内容列表单页面实例与路由别名的使用
<div id="app">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}</h1>
<p>
{{field.content}}
</p>
<router-link to="/">返回首页</router-link>
</div>
</script>
<script>
var data =[
{id:1,title:'listen',content:'listen内容。。。'},
{id:2,title:'live',content:'live内容。。。'}
];
const home={
template:'#home',
data(){
return{
news:data
}
}
};
const content ={
template:'#content',
data(){
return{
field:{}
}
},
mounted(){
var id = this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
}
};
//定义路由器
let routes = [
{path:'/',component:home},
{path:'/content/:id',component:content,name:'content'},
];
//把组件交给路由
let router = new VueRouter({routes});
var app = new Vue({
el:'#app',
router,
});
</script>
vue-router路由嵌套
<div id="app">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
</li>
<router-view></router-view>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}</h1>
<p>
{{field.content}}
</p>
</div>
</script>
<script>
var data =[
{id:1,title:'listen',content:'listen内容。。。'},
{id:2,title:'live',content:'live内容。。。'}
];
const home={
template:'#home',
data(){
return{
news:data
}
}
};
const content = {
template: '#content',
data() {
return {
field: {}
}
},
//监听路由变化
watch: {
'$route'(to, from) {
this.load();
}
},
mounted() {
this.load();
},
methods: {
load() {
var id = this.$route.params.id;
for (let k = 0; k < data.length; k++) {
if (data[k].id == id) {
this.field = data[k];
}
}
}
}
};
//定义路由器
let routes = [
{path:'/',component:home,children:[
{path:'/content/:id',component:content,name:'content'},
]},
];
//把组件交给路由
let router = new VueRouter({routes});
var app = new Vue({
el:'#app',
router,
});
</script>
喜欢这篇文章的话 打赏一下吧!