php的路由和vue路由怎么结合,Vue路由及默认路由的跳转

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 、根组件的模板里面放上这句话

6、路由跳转

Go to Foo

Go to Bar

代码实现如下

src/components/Home.vue

我是首页组件

export default{

data(){

return {

msg:'我是一个home组件'

}

}

}

src/components/News.vue

我是新闻组件

export default{

data(){

return {

msg:'我是一个新闻组件'

}

}

}

App.vue

首页

新闻

---

export default {

data () {

return {

msg:'你好vue'

}

}

}

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 放在 App.vue

Vue动态路由get传参

src/components/Content.vue

我是详情页面

export default{

data(){

return{

msg:'数据'

}

},

mounted(){

console.log(this.$route.params); /*获取动态路由传值*/

}

}

src/components/Home.vue

我是首页组件

• {{key}}--{{item}}

export default{

data(){

return {

msg:'我是一个home组件',

list:['商品111111','商品222222','商品333333']

}

}

}

src/components/News.vue

我是新闻组件

• {{key}}--{{item}}

export default{

data(){

return {

msg:'我是一个新闻组件' ,

list:['111111','222222','333333']

}

}

}

src/components/Pcontent.vue

商品详情

export default{

data(){

return{

msg:'数据'

}

},

mounted(){

//获取get传值

console.log(this.$route.query);

}

}

App.vue

首页

新闻

---

/*1、不同路由传值：动态路由

1、配置动态路由

routes: [

// 动态路径参数 以冒号开头

{ path: '/user/:id', component: User }

]

2、在对应的页面

this.$route.params获取动态路由的值

*/

export default {

data () {

return {

msg:'你好vue'

}

}

}

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 放在 App.vue

vue路由结合请求数据 实现新闻列表 新闻详情数据渲染

代码如下

src/components/Content.vue

{{list.title}}

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)

})

}

}

}

#content{

padding:1rem;

line-height:2;

img{

max-width:100%;

}

}

Home.vue

我是首页组件

export default{

data(){

return {

msg:'我是一个home组件'

}

}

}

src/component/News.vue

我是新闻组件

• {{item.title}}

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();

}

}

.list{

li{

height:3.4rem;

line-height:3.4rem;

boder-bottom:1px solid #eee;

font-size:1.6rem;

a{

color:#666;

}

}

}

App.vue

首页

新闻

---

/*1、不同路由传值：动态路由

1、配置动态路由

routes: [

// 动态路径参数 以冒号开头

{ path: '/user/:id', component: User }

]

2、在对应的页面

this.$route.params获取动态路由的值

*/

export default {

data () {

return {

msg:'你好vue'

}

}

}

.header{

height:4.4rem;

background:#000;

color:#fff;

line-height:4.4rem;

text-align:center;

a{

color:#fff;

padding:0 2rem

}

}

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 放在 App.vue

vue路由编程式的导航 以及vue路由HIstory模式 hash模式

{{list.title}}

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)

})

}

}

}

#content{

padding:1rem;

line-height:2;

img{

max-width:100%;

}

}

我是首页组件

通过js跳转到新闻页面

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'})

}

}

}

我是新闻组件

• {{item.title}}

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();

}

}

.list{

li{

height:3.4rem;

line-height:3.4rem;

boder-bottom:1px solid #eee;

font-size:1.6rem;

a{

color:#666;

}

}

}

首页

新闻

---

/*1、不同路由传值：动态路由

1、配置动态路由

routes: [

// 动态路径参数 以冒号开头

{ path: '/user/:id', component: User }

]

2、在对应的页面

this.$route.params获取动态路由的值

*/

export default {

data () {

return {

msg:'你好vue'

}

}

}

.header{

height:4.4rem;

background:#000;

color:#fff;

line-height:4.4rem;

text-align:center;

a{

color:#fff;

padding:0 2rem

}

}

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 放在 App.vue

Vue中路由的嵌套

component组件

{{list.title}}

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)

})

}

}

}

#content{

padding:1rem;

line-height:2;

img{

max-width:100%;

}

}

我是首页组件

通过js跳转到新闻页面

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'})

}

}

}

我是新闻组件

• {{item.title}}

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();

}

}

.list{

li{

height:3.4rem;

line-height:3.4rem;

boder-bottom:1px solid #eee;

font-size:1.6rem;

a{

color:#666;

}

}

}

• 增加用户

• 用户列表

export default{

data(){

return {

msg:'我是一个user组件'

}

}

}

.user{

display:flex;

.left{

width:200px;

min-height:400px;

border-right:1px solid #eee;

li{

line-height:2;

}

}

.right{

flex:1;

}

}

component/user/UserAdd.vue

增加用户

component/user/UserList.vue

用户列表

App.vue

首页

新闻

用户

---

export default {

data () {

return {

msg:'你好vue'

}

}

}

.header{

height:4.4rem;

background:#000;

color:#fff;

line-height:4.4rem;

text-align:center;

a{

color:#fff;

padding:0 2rem

}

}

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.父路由里面配置子路由显示的地方

*/

//请求数据

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 放在 App.vue