vue路由配置：
1.安装
npm install vue-router --save / cnpm install vue-router --save
2、引入并 Vue.use(VueRouter) (main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、配置路由
1、创建组件 引入组件
2、定义路由 （建议复制s）
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
3、实例化VueRouter
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
4、挂载
new Vue({
el: '#app',
router，
render: h => h(App)
})
5 、根组件的模板里面放上这句话 <router-view></router-view>
6、路由跳转
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
代码实现如下
src/components/Home.vue
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个home组件'
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/components/News.vue
<template>
<div id="news">
我是新闻组件
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个新闻组件'
}
}
}
</script>
<style lang="scss" scoped>
</style>
App.vue
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg:'你好vue'
}
}
}
</script>
<style lang="scss">
</style>
main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由 注意：名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
//3.实例化VueRouter 注意：名字
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue
Vue动态路由get传参
src/components/Content.vue
<template>
<div id="content">
我是详情页面
</div>
</template>
<script>
export default{
data(){
return{
msg:'数据'
}
},
mounted(){
console.log(this.$route.params); /*获取动态路由传值*/
}
}
</script
src/components/Home.vue
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件
<ul>
<li v-for="(item,key) in list">
<router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个home组件',
list:['商品111111','商品222222','商品333333']
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/components/News.vue
<template>
<div id="news">
我是新闻组件
<ul>
<li v-for="(item,key) in list">
<router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个新闻组件' ,
list:['111111','222222','333333']
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/components/Pcontent.vue
<template>
<div id="content">
商品详情
</div>
</template>
<script>
export default{
data(){
return{
msg:'数据'
}
},
mounted(){
//获取get传值
console.log(this.$route.query);
}
}
</script>
App.vue
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
/*1、不同路由传值：动态路由
1、配置动态路由
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
2、在对应的页面
this.$route.params获取动态路由的值
*/
export default {
data () {
return {
msg:'你好vue'
}
}
}
</script>
<style lang="scss">
</style>
main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
//2.配置路由 注意：名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:aid', component: Content }, /*动态路由*/
{ path: '/pcontent', component: Pcontent },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
//3.实例化VueRouter 注意：名字
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue
vue路由结合请求数据 实现新闻列表 新闻详情数据渲染
代码如下
src/components/Content.vue
<template>
<div id="content">
<h2>{{list.title}}</h2>
<div v-html="list.content"></div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'数据',
list:[]
}
},
mounted(){
// console.log(this.$route.params); /*获取动态路由传值*/
var aid=this.$route.params.aid;
//调用请求数据的方法
this.requestData(aid);
},
methods:{
requestData(aid){
//get请求如果跨域的话 后台php java 里面要允许跨域请求
var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
this.$http.get(api).then((response)=>{
console.log(response);
this.list=response.body.result[0];
},(err)=>{
console.log(err)
})
}
}
}
</script>
<style lang="scss">
#content{
padding:1rem;
line-height:2;
img{
max-width:100%;
}
}
</style>
Home.vue
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个home组件'
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/component/News.vue
<template>
<div id="news">
我是新闻组件
<ul class="list">
<li v-for="(item,key) in list">
<router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个新闻组件' ,
list:[]
}
},
methods:{
requestData(){
//jsonp请求的话 后台api接口要支持jsonp
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.jsonp(api).then((response)=>{
console.log(response);
//注意：用到this要注意this指向
this.list=response.body.result;
},function(err){
console.log(err);
})
}
},
mounted(){
this.requestData();
}
}
</script>
<style lang="scss" scoped>
.list{
li{
height:3.4rem;
line-height:3.4rem;
boder-bottom:1px solid #eee;
font-size:1.6rem;
a{
color:#666;
}
}
}
</style>
App.vue
<template>
<div id="app">
<header class="header">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
</header>
<hr>
<router-view></router-view>
</div>
</template>
<script>
/*1、不同路由传值：动态路由
1、配置动态路由
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
2、在对应的页面
this.$route.params获取动态路由的值
*/
export default {
data () {
return {
msg:'你好vue'
}
}
}
</script>
<style lang="scss">
.header{
height:4.4rem;
background:#000;
color:#fff;
line-height:4.4rem;
text-align:center;
a{
color:#fff;
padding:0 2rem
}
}
</style>
main.js
import Vue from 'vue';
import App from './App.vue';
//引入公共的scss 注意：创建项目的时候必须用scss
import './assets/css/basic.scss';
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
//2.配置路由 注意：名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:aid', component: Content }, /*动态路由*/
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
//3.实例化VueRouter 注意：名字
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue
vue路由编程式的导航 以及vue路由HIstory模式 hash模式
<template>
<div id="content">
<h2>{{list.title}}</h2>
<div v-html="list.content"></div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'数据',
list:[]
}
},
mounted(){
// console.log(this.$route.params); /*获取动态路由传值*/
var aid=this.$route.params.aid;
//调用请求数据的方法
this.requestData(aid);
},
methods:{
requestData(aid){
//get请求如果跨域的话 后台php java 里面要允许跨域请求
var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
this.$http.get(api).then((response)=>{
console.log(response);
this.list=response.body.result[0];
},(err)=>{
console.log(err)
})
}
}
}
</script>
<style lang="scss">
#content{
padding:1rem;
line-height:2;
img{
max-width:100%;
}
}
</style>
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件
<button @click="goNews()">通过js跳转到新闻页面</button>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个home组件'
}
},
methods:{
goNews(){
// 注意：官方文档写错了
//第一种跳转方式
// this.$router.push({ path: 'news' })
// this.$router.push({ path: '/content/495' });
//另一种跳转方式
// { path: '/news', component: News,name:'news' },
// router.push({ name: 'news', params: { userId: 123 }})
this.$router.push({ name: 'news'})
}
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<div id="news">
我是新闻组件
<ul class="list">
<li v-for="(item,key) in list">
<router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个新闻组件' ,
list:[]
}
},
methods:{
requestData(){
//jsonp请求的话 后台api接口要支持jsonp
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.jsonp(api).then((response)=>{
console.log(response);
//注意：用到this要注意this指向
this.list=response.body.result;
},function(err){
console.log(err);
})
}
},
mounted(){
this.requestData();
}
}
</script>
<style lang="scss" scoped>
.list{
li{
height:3.4rem;
line-height:3.4rem;
boder-bottom:1px solid #eee;
font-size:1.6rem;
a{
color:#666;
}
}
}
</style>
<template>
<div id="app">
<header class="header">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
</header>
<hr>
<router-view></router-view>
</div>
</template>
<script>
/*1、不同路由传值：动态路由
1、配置动态路由
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
2、在对应的页面
this.$route.params获取动态路由的值
*/
export default {
data () {
return {
msg:'你好vue'
}
}
}
</script>
<style lang="scss">
.header{
height:4.4rem;
background:#000;
color:#fff;
line-height:4.4rem;
text-align:center;
a{
color:#fff;
padding:0 2rem
}
}
</style>
import Vue from 'vue';
import App from './App.vue';
//引入公共的scss 注意：创建项目的时候必须用scss
import './assets/css/basic.scss';
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
//2.配置路由 注意：名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News,name:'news' },
{ path: '/content/:aid', component: Content }, /*动态路由*/
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
//3.实例化VueRouter 注意：名字
const router = new VueRouter({
mode: 'history', /*hash模式改为history*/
routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue
Vue中路由的嵌套
component组件
<template>
<div id="content">
<h2>{{list.title}}</h2>
<div v-html="list.content"></div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'数据',
list:[]
}
},
mounted(){
// console.log(this.$route.params); /*获取动态路由传值*/
var aid=this.$route.params.aid;
//调用请求数据的方法
this.requestData(aid);
},
methods:{
requestData(aid){
//get请求如果跨域的话 后台php java 里面要允许跨域请求
var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
this.$http.get(api).then((response)=>{
console.log(response);
this.list=response.body.result[0];
},(err)=>{
console.log(err)
})
}
}
}
</script>
<style lang="scss">
#content{
padding:1rem;
line-height:2;
img{
max-width:100%;
}
}
</style>
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件
<button @click="goNews()">通过js跳转到新闻页面</button>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个home组件'
}
},
methods:{
goNews(){
// 注意：官方文档写错了
//第一种跳转方式
// this.$router.push({ path: 'news' })
// this.$router.push({ path: '/content/495' });
//另一种跳转方式
// { path: '/news', component: News,name:'news' },
// router.push({ name: 'news', params: { userId: 123 }})
this.$router.push({ name: 'news'})
}
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<div id="news">
我是新闻组件
<ul class="list">
<li v-for="(item,key) in list">
<router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个新闻组件' ,
list:[]
}
},
methods:{
requestData(){
//jsonp请求的话 后台api接口要支持jsonp
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.jsonp(api).then((response)=>{
console.log(response);
//注意：用到this要注意this指向
this.list=response.body.result;
},function(err){
console.log(err);
})
}
},
mounted(){
this.requestData();
}
}
</script>
<style lang="scss" scoped>
.list{
li{
height:3.4rem;
line-height:3.4rem;
boder-bottom:1px solid #eee;
font-size:1.6rem;
a{
color:#666;
}
}
}
</style>
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="user">
<div class="user">
<div class="left">
<ul>
<li>
<router-link to="/user/useradd"> 增加用户</router-link>
</li>
<li>
<router-link to="/user/userlist"> 用户列表</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个user组件'
}
}
}
</script>
<style lang="scss" scoped>
.user{
display:flex;
.left{
width:200px;
min-height:400px;
border-right:1px solid #eee;
li{
line-height:2;
}
}
.right{
flex:1;
}
}
</style>
component/user/UserAdd.vue
<template>
<div id="adduser">
增加用户
</div>
</template>
component/user/UserList.vue
<template>
<div id="adduser">
用户列表
</div>
</template>
App.vue
<template>
<div id="app">
<header class="header">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/user/useradd">用户</router-link>
</header>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg:'你好vue'
}
}
}
</script>
<style lang="scss">
.header{
height:4.4rem;
background:#000;
color:#fff;
line-height:4.4rem;
text-align:center;
a{
color:#fff;
padding:0 2rem
}
}
</style>
import Vue from 'vue';
import App from './App.vue';
//引入公共的scss 注意：创建项目的时候必须用scss
import './assets/css/basic.scss';
/*路由的嵌套
1.配置路由
{
path: '/user',
component: User,
children:[
{ path: 'useradd', component: UserAdd },
{ path: 'userlist', component: Userlist }
]
}
2.父路由里面配置子路由显示的地方 <router-view></router-view>
*/
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import User from './components/User.vue';
import UserAdd from './components/User/UserAdd.vue';
import Userlist from './components/User/Userlist.vue';
//2.配置路由 注意：名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News,name:'news' },
{
path: '/user',
component: User,
children:[
{ path: 'useradd', component: UserAdd },
{ path: 'userlist', component: Userlist }
]
},
{ path: '/content/:aid', component: Content }, /*动态路由*/
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
//3.实例化VueRouter 注意：名字
const router = new VueRouter({
mode: 'history', /*hash模式改为history*/
routes // （缩写）相当于 routes: routes
})
//4、挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue
